前端试题2#记录

1、介绍以下CSS的盒子模型

盒子模型分为两种:

(1)第一种是W3c标准的盒子模型(标准盒模型)

  • width和height:内容的宽度、高度(不是盒子的宽度、高度)。
  • padding:内边距。
  • border:边框。
  • margin:外边距。

(2)第二种IE标准的盒子模型(怪异盒模型)

  • width和height:内容的宽度、高度(不是盒子的宽度、高度)。
  • padding:内边距。
  • border:边框。

2、1rem、1em、1vh、1px各自代表什么

rem:页面所有使用rem单位的长度都是相对于根元素元素的font-size大小。即1rem等于根元素元素的font-size大小。

em:子元素字体大小的em是相对于父元素字体大小。元素的width/height/padding/margin用em的话是相对于该元素的font-size。

vh:全称是 Viewport Height,视口的高度,1vh相当于 视口高度的 1%。

px:相对长度单位。

3、vuex主要包含几个模块

五个模块分别是:state getters mutations actions modules.
State:就是Vuex中的数据仓库,用于存储所有组件的公共数据,数据需初始化且不支持直接修改。
Getters:从基本数据派生的数据,这是个计算属性,简单说就是对state中的数据进行二次运算,获取新的属性值。

Mutations:提交更改数据的方法,同步!用来修改state中的数据。

Actions:处理异步操作!同样用来修改state中的数据,但是需要提交Mutations用来实现修改数据。

Modules:模款化vuex,是解决了当 state 中很复杂臃肿的时候,module 可以将 store 分割成模块,每个模块中拥有自己的 state、mutation、action和 getter。

4、SPA单页面优缺点有哪些

优点:

1. 更好的用户体验

2. 更快的页面加载速度

缺点:

1. 对网络和服务器性能的要求更高

2. 对浏览器兼容性的要求更高

5、computed和watch的区别和运用场景

computed:是计算属性,依赖其它属性值,并且 computed 的值有缓存,只有它依赖的属性值发生改变,下一次获取 computed 的值时才会重新计算 computed 的值;

当一个属性的值依赖于一个或多个其他属性的值时或一个属性的值需要进行复杂的逻辑计算时,应该使用 computed,因为可以利用 computed 的缓存特性,避免每次获取值时,都要重新计算;可以理解为一个结果受到多个因素的影响。

watch:没有缓存性,更多的是「观察」的作用,类似于某些数据的监听回调 ,每当监听的数据变化时都会执行回调进行后续操作;当我们需要深度监听对象中的属性时,可以打开deep:true选项,这样便会对对象中的每一项进行监听。

6、vue生命周期的理解

  1. beforeCreate(已被移除) => 在组件实例初始化之前调用。 对应的组合式API:在 <script setup> 中直接编写初始化逻辑。
  2. created(已被移除) => 在组件实例创建完成后调用。 对应的组合式API:在 setup() 函数中编写初始化逻辑。
  3. beforeMount(被取代) => 在组件挂载到DOM之前调用。 对应的组合式API:可以在 onBeforeMount 钩子函数中进行操作。
  4. mounted(被取代) => 在组件挂载到DOM后调用。 对应的组合式API:可以在 onMounted 钩子函数中进行操作。
  5. beforeUpdate(被取代) => 在组件更新之前调用。 对应的组合式API:可以在 onBeforeUpdate 钩子函数中进行操作。
  6. updated(被取代) => 在组件更新之后调用。 对应的组合式API:可以在 onUpdated 钩子函数中进行操作。
  7. beforeDestroy(被取代) => 在组件卸载之前调用。 对应的组合式API:可以在 onBeforeUnmount 钩子函数中进行操作。
  8. destroyed(被取代) => 在组件卸载之后调用。 对应的组合式API:可以在 onUnmounted 钩子函数中进行操作。

7、vue组件通信有哪几种

  • 通过 props 传递

  • 通过 $emit 触发自定义事件

  • 使用 ref

  • EventBus

  • parent或root

  • attrs 与 listeners

  • Provide 与 Inject

  • Vuex

8、vue3的特性有哪些

1、Vue3 组合式 API VS Vue2 选项式 API

2、数据响应式原理 Proxy 相对于 Object.defineProperty

  • proxy 的性能本来比 defineProperty 好,proxy。
  • 可以拦截属性的访问、赋值、删除等操作,不需要初始化的时候遍历所有属性,另外有多层属性嵌套的话,只有访问某个属性的时候,才会递归处理下一级的属性。
  • 可以监听数组变化。
  • 可以劫持整个对象。
  • 操作时不是对原对象操作,是 new Proxy 返回的一个新对象。
  • 可以劫持的操作有 13 种。

3、<script setup> 语法糖

4、生命周期钩子

  • setup 代替了 beforeCreate,created,如果在 options api 中书写,会在 beforeCreate 之前执行
  • mounted、beforeMount、beforeUpdate、updated ,都改成 onxxx
  • beforeDestroy 改成 onBeforeUnmount;
  • destroyed 改成 onUnmounted

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/789053.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HarmonyOS入门-ArkTS学习(一)

1. 什么是ArkTS语言 学习之前&#xff0c;我们先初步了解下什么是ArkTS 官方指南这样介绍&#xff1a; ArkTS是TS的超集&#xff0c;ArkTS定义了声明式UI描述、自定义组件和动态扩展UI元素的能力&#xff0c;再配合ArkUI开发框架中的系统组件及其相关的事件方法、属性方法等共…

OpenHarmony实战:轻量级系统之子系统移植概述

OpenHarmony系统功能按照“系统 > 子系统 > 部件”逐级展开&#xff0c;支持根据实际需求裁剪某些非必要的部件&#xff0c;本文以部分子系统、部件为例进行介绍。若想使用OpenHarmony系统的能力&#xff0c;需要对相应子系统进行适配。 OpenHarmony芯片适配常见子系统列…

留学生在美国大学利用AI工具到底算不算作弊呢?

自2022年以来&#xff0c;美国大学就开启了一场AI作弊与反作弊大战 战场小至测验&#xff0c;大至申请 这场战争并没有一方胜利&#xff0c;作弊者心思费尽 校方反作弊弄得教授们苦不堪言 那么作为中国留学生该如何避免这场战役呢&#xff1f; 毕竟还是学业要紧呢…… 故事…

让六西格玛培训有效的三个步骤,拿走不谢!

近年来&#xff0c;六西格玛作为一种先进的质量管理方法&#xff0c;被众多企业视为提升产品质量、优化流程、减少浪费的利器。然而&#xff0c;如何使六西格玛培训真正落地生根&#xff0c;发挥出其应有的效果&#xff0c;成为了许多企业关注的焦点。本文&#xff0c;天行健Si…

每日五道java面试题之消息中间件MQ篇(二)

目录&#xff1a; 第一题. RabbitMQ的工作模式第二题. 如何保证RabbitMQ消息的顺序性&#xff1f;第三题. 消息如何分发&#xff1f;第四题. 消息怎么路由&#xff1f;第五题. 如何保证消息不被重复消费&#xff1f;或者说&#xff0c;如何保证消息消费时的幂等性&#xff1f; …

Android adb ime 调试输入法

目录 前言列出所有输入法仅列出输入法 id列出所有输入法的所有信息 启用/禁用 输入法启用输入法禁用输入法 切换输入法还原输入法 前言 安装多个输入法后&#xff0c;可以在设置里进行切换。 既然是开发&#xff0c;能用命令就就命令~ ime 帮助说明&#xff1a; ime <c…

目标检测、识别和语义分割的标注工具安装

计算机视觉 图像分类&#xff08;目标检测&#xff09;&#xff1a;一张图像中是否含某种物体物体定位&#xff08;目标检测与目标识别&#xff09;&#xff1a;确定目标位置和所属类别。语义分割&#xff08;目标分割和目标分类&#xff09;&#xff1a;对图像进行像素级分类…

推荐算法策略需求-rank model优化

1.pred_oobe (base) [rusxx]$ pwd /home/disk2/data/xx/icode/baidu/oxygen/rus-pipeline/pipeline-migrate/UserBaseActiveStatPipeline/his_session (base) [rusxx]$ sh test.sh 2. user_skill_history_dict_expt2包含userid [workxx]$ vim /home/work/xx/du-rus/du_rus_o…

Python 之 Flask 框架学习

毕业那会使用过这个轻量级的框架&#xff0c;最近再来回看一下&#xff0c;依赖相关的就不多说了&#xff0c;直接从例子开始。下面示例中的 html 模板&#xff0c;千万记得要放到 templates 目录下。 快速启动 hello world from flask import Flask, jsonify, url_forapp F…

【edge浏览器无法登录某些网站,以及迅雷插件无法生效的解决办法】

edge浏览器无法登录某些网站&#xff0c;以及迅雷插件无法生效的解决办法 edge浏览器无法登录某些网站&#xff0c;但chrome浏览器可以登录浏览器插件无法使用&#xff0c;比如迅雷如果重装插件重装浏览器重装迅雷后仍然出现问题 edge浏览器无法登录某些网站&#xff0c;但chro…

基于FPGA的SPI_FLASH程序设计

SPI_FLASH简介 spi_flash是一种通用存储器&#xff0c;也称为SPI NOR Flash或SPI Flash。它使用SPI&#xff08;Serial Peripheral Interface&#xff09;接口进行通信&#xff0c;可以通过串行方式读写数据。spi_flash的特点是工作电压低&#xff0c;体积小&#xff0c;读写速…

【单片机家电产品学习记录--红外线】

单片机家电产品学习记录–红外线 红外手势驱动电路&#xff0c;&#xff08;手势控制的LED灯&#xff09; 原理 通过红外线对管&#xff0c;IC搭建的电路&#xff0c;实现灯模式转换。 手势控制灯模式转换&#xff0c;详细说明 转载 1《三色调光LED台灯电路》&#xff0c…

矩阵空间秩1矩阵小世界图

文章目录 1. 矩阵空间2. 微分方程3. 秩为1的矩阵4. 图 1. 矩阵空间 我们以3X3的矩阵空间 M 为例来说明相关情况。目前矩阵空间M中只关心两类计算&#xff0c;矩阵加法和矩阵数乘。 对称矩阵-子空间-有6个3X3的对称矩阵&#xff0c;所以为6维矩阵空间上三角矩阵-子空间-有6个3…

【Turtle】海龟先生

什么是编程 计算机只懂0和1这样的语言&#xff0c;可是我们不懂&#xff0c;当我们希望 计算要能帮我们做事情的时候&#xff0c;该怎么办呢&#xff1f; 我们需要一种更简便的方法告诉计算机要做什么&#xff0c;所以人类发明了编程语言 利用计算机编程语言&#xff0c;我们…

硬件了解 笔记

motherboard的高低端区别在哪里&#xff1f; 核心&#xff1a;从单核变成双核&#xff0c;多核&#xff08;几核就是几个打工人&#xff09; 多线程&#xff1a;6核本来对应6个线程&#xff0c;但是多线程就是说6核对应12个线程 频率 主频&#xff1a;平时打工的速度 睿频&…

iNeuOS工业互联网操作系统,“低代码”表单开发应用过程(一)

iNeuOS工业互联网操作系统&#xff0c;“低代码”表单开发应用过程&#xff08;一&#xff09; 目 录 1. 概述... 2 2. “低代码”表单开发应用过程... 2 1. 概述 iNeuOS工业互联网操作系统“表单设计”功能经过升级后&#xff0c;能够适用于更多应用场景&…

Altair® FluxMotor® 电机拓扑探索和多物理场优化

Altair FluxMotor 电机拓扑探索和多物理场优化 FluxMotor 致力于解决电机的整体设计问题。该软件工具可帮助工程师加快电机设计速度&#xff0c;在考虑多物理场约束条件的同时快速探究各种参数配置&#xff0c;并在几分钟内选出完善的可能。 FluxMotor 具有简单直观的使用界面…

美摄科技AI智能图像矫正解决方案

图像已经成为了企业传播信息、展示产品的重要媒介&#xff0c;在日常拍摄过程中&#xff0c;由于摄影技巧的限制和拍摄环境的复杂多变&#xff0c;许多企业面临着图像内容倾斜、构图效果不佳等挑战&#xff0c;这无疑给企业的形象展示和信息传递带来了不小的困扰。 美摄科技深…

索引下推(Index Condition Pushdown,简称 ICP)

Mysql可以分为Server层和存储引擎层 所以&#xff0c;最终进行I/O的是存储引擎对文件系统进行I/O操作 索引下推&#xff08;Index Condition Pushdown&#xff0c;简称 ICP&#xff09; 对应InnoDB&#xff0c;索引下推适用于非聚簇索引&#xff08;二级索引&#xff09;。 …

数据结构进阶篇 之【选择排序】详细讲解(选择排序,堆排序)

民以食为天&#xff0c;我以乐为先 嘴上来的嘘寒问暖&#xff0c;不如直接打笔巨款 一、选择排序 1.直接选择排序 SelectSort 1.1 基本思想 1.2 实现原理 1.3 代码实现 1.4 直接选择排序的特性总结 2.堆排序 HeapSort 跳转链接&#xff1a;数据结构 之 堆的应用 二、完…