vue 面试题（中级题库）

• 简单难度（20%）：

一、.什么是CSS盒模型？简要描述它的组成部分。
1.盒模型：就是把HTML页面中的元素看作是以一个矩形的盒子，也就是一个装东西的容器。
2.盒模型包含四部分：内容（content）、内边距也称之为补白和填充区（padding）边框（border）外边距（margin）

二、CSS清除浮动的方法有哪些。
1.使用clearfix：clearfix 是一种使用伪元素的方式，通过在父元素上添加 ::after 伪元素，并设置 clear: both 来清除浮动。

2.使用overflow：在父元素上设置 overflow: hidden 或 overflow: auto，可以使父元素包含浮动元素。

3.使用display：table：在父元素上设置 display: table，可以使父元素包含浮动元素。

4.使用display：flow-root：在父元素上设置 display: flow-root，可以清除浮动。

5.使用flex布局：在父元素上使用flex布局，可以将子元素包含在父元素中。 ::: ::::

三、var，let，const的比较。
1.作用域：var 声明的变量在函数作用域中有效，而 let 和 const 声明的变量在块级作用域中有效，即大括号 {} 中。在块级作用域中声明的变量只在该作用域内有效，在作用域外不可访问。

2.变量提升：使用 var 声明的变量会发生变量提升，即在函数作用域中，变量声明会被提升到函数顶部。而使用 let 和 const 声明的变量不会发生变量提升，只有在变量声明的位置之后才能访问。

3.重复声明：使用 var 声明的变量可以在同一个作用域内重复声明多次，后面的声明会覆盖前面的声明。而使用 let 或 const 声明的变量在同一个作用域内重复声明会报错。

4.赋值：使用 var、let、const 声明的变量都可以重新赋值。但使用 const 声明的变量是常量，不能改变其值的引用，即不能重新赋值。而使用 var 和 let 声明的变量可以重新赋值。 ::: ::::

四、什么是事件冒泡和事件捕获？简要描述它们之间的区别。
1.事件冒泡是从事件目标元素向上冒泡到祖先元素的过程。即事件在目标元素上触发后，会沿着 DOM 树向上传递，一直到根节点为止，期间经过的所有元素都会触发相同的事件。这意味着，如果一个子元素上触发了事件，那么其所有祖先元素都会依次触发同一个事件。

2.事件捕获是从根节点向下捕获到目标元素的过程。即事件从根节点开始，沿着 DOM 树向下传递，直到目标元素为止，期间经过的所有元素都会触发相同的事件。这意味着，如果一个父元素上触发了事件，那么其所有子元素都会依次触发同一个事件。

3.事件冒泡和事件捕获之间的主要区别在于传播方向。事件冒泡是从目标元素向上传递到根节点，而事件捕获是从根节点向下捕获到目标元素。另外，事件冒泡是默认的传播方式，而事件捕获需要通过 addEventListener 方法的第三个参数来指定。

4.在实际开发中，事件冒泡和事件捕获经常被用来实现事件委托和事件处理优化。事件委托可以将事件处理函数绑定到祖先元素上，利用事件冒泡机制实现对后代元素的事件处理；事件处理优化可以根据具体的应用场景选择事件冒泡或事件捕获，避免不必要的事件处理和性能消耗。 ::: ::::

五、JS有哪些数据类型
1.数字（number）：表示整数和浮点数，例如 42、3.14 等。

2.字符串（string）：表示文本，例如 “hello world”、‘JavaScript’ 等。

3.布尔值（boolean）：表示真或假，即 true 或 false。

4.空值（null）：表示空或不存在的值，可以使用 null 来显式地赋值。

5.未定义（undefined）：表示变量未定义或对象属性不存在，例如未初始化的变量或未赋值的属性。

6.符号（symbol）：表示唯一的标识符，用于对象属性的键值或作为隐藏属性等。

7.大整数（bigint）：表示任意精度整数，可以使用 n 结尾的数字字面量来定义。

此外，JavaScript 还有一种复杂数据类型，即对象（object）。对象可以包含任意数量和类型的属性，包括基本类型和其他对象类型。对象可以通过字面量、构造函数或对象字面量语法来创建。

• 中等难度（60%）：

一、Vue中v-if和v-show的区别。
1.编译时刻不同：v-if 在编译时会将元素添加或移除 DOM，而 v-show 则会将元素的 display 属性设置为 none。

2.初始渲染时不同：v-if 在初始渲染时如果条件为 false，则元素不会被渲染到 DOM 中，而 v-show 在初始渲染时始终会渲染到 DOM 中。

3.更新时渲染方式不同：v-if 在条件切换时会重新渲染元素，而 v-show 切换时只会修改元素的 display 属性。

综上所述，当需要频繁切换元素的显示和隐藏时，建议使用 v-show；而当条件较少变化时，建议使用 v-if，以避免不必要的 DOM 渲染开销。 ::: ::::

二、Vue中Computed和Watch的区别。
1.实现方式不同：computed 是一个计算属性，通过函数的方式返回一个计算结果，只有在依赖的数据发生变化时才会重新计算，而 watch 则是一个观察者，通过监听数据变化来执行相应的操作。

2.使用场景不同：computed 适用于根据已有数据计算出新的值的场景，例如将商品价格转换为带有货币符号的格式，或者根据多个输入框的值计算出一个总价等。而 watch 则适用于监听某个特定数据的变化并执行相应的操作，例如在数据变化时发起一个 API 请求，或者在路由变化时更新页面的标题等。

3.能否监听对象和数组的变化不同：computed 可以监听对象和数组的变化，但需要使用深度监听或者自定义 setter 来实现。而 watch 可以监听对象和数组的变化，并提供了一些可选的配置项，例如 immediate 和 deep 等。

综上所述，computed 和 watch 都有各自的优缺点和适用场景，需要根据具体的业务需求来选择使用哪种方式来监听数据变化。 ::: ::::

三、浏览器中回流和重绘的区别。
1.回流（reflow）是指当页面中的元素位置、大小等发生变化时，浏览器需要重新计算页面布局并重新绘制页面的过程。回流的成本很高，因为它会触发整个页面的重新渲染，并且会导致其他元素的位置和大小发生变化。

• 回流的触发方式包括以下几种：
  1.添加、删除、修改页面元素的内容 修改页面元素的