2024高频前端面试题 Vue2 和 Vue3 篇

HTML和CSS篇：2024高频前端面试题 HTML 和 CSS 篇-CSDN博客

JavaScript 和 ES6 篇： 2024高频前端面试题 JavaScript 和 ES6 篇-CSDN博客

* Vue2 和 Vue3的区别：

1）双向数据绑定原理的区别

2）根节点的不同

Vue2只能一个根节点

Vue3在组件中可以放置多个根节点

3）Vue3中采用composition API 

vue2:采用的选项型API(opsition API)
vue3:采用的组合型API(composition API）

4）建立的数据方式不同 

vue2:数据是放置在data属性中
vue3:需要使用setup 方法，该方法在初始化构造的时候触发
注：ref:需要value 访问，内部还是使用的defineProperty set get 方法进行监听（proxy 不支持基本类型的监听）
reactive: 使用的proxy对数据进行的一个代理

5）生命周期函数不同 

6）diff算法不同

7）父子传参不同

vue2：父传子，用props,子传父用事件 Emitting Events。在vue2中，会调用this$emit然后传入事件名和对象。

vue3：父传子，用props,子传父用事件 Emitting Events。在vue3中的setup()中的第二个参数content对象中就有emit，那么我们只要在setup()接收第二个参数中使用分解对象法取出emit就可以在setup方法中随意使用了。

1. 什么是MVVM?

M - Model 数据：负责数据管理和业务逻辑。
V - View 视图：负责用户界面的展示和呈现。
VM - ViewModel 视图-数据：它是View和Model的粘合体，负责View和Model的交互和协作

vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的， 也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变； 

核心：关于VUE双向数据绑定，其核心是 Object.defineProperty()方法，get set 方法。

在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信。

MVVM 是一种软件架构模式。它是基于 MVC 的一种演变，将视图和数据绑定的方式更加紧密地结合在一起。 

2. 什么是MVC？ 

M - Model 数据：负责数据管理和业务逻辑。模型表示应用程序中的数据结构以及对数据的操作。
V - View 视图：负责用户界面的展示和呈现，通常是用户可以看到和与之交互的部分。
C - Controller 控制器： 负责接收用户的输入并作出响应，它处理用户与模型和视图之间的交互。控制器将用户的操作转发给模型进行处理，并将模型的结果传递给视图进行展示。

MVC 的优势：
能够将应用程序的各个功能模块分离开来，提高代码的可维护性和可扩展性。通过明确定义了各个组件的职责，开发人员可以更好地组织和管理代码，同时也使得代码更容易被复用。

3. MVVM 和 MVC的区别 

1、mvvm各部分的通信是双向的，而mvc各部分通信是单向的；

2、mvvm是真正将页面与数据逻辑分离放到js里去实现，而mvc里面未分离。

MVC允许在不改变视图的情况下改变视图对用户输入的响应方式，用户对View的操作交给了Controller处理，在Controller中响应View的事件调用Model的接口对数据进行操作，一旦Model发生变化便通知相关视图进行更新。 

4. Vue2响应式原理 

对象类型：

使用 Object.defineProperty 遍历对象的每一个属性，把每一个属性变成一个 getter 和 setter 函数，读取属性的时候调用 getter，给属性赋值的时候就会调用 setter，这就是数据劫持。

数组类型：

通过重写更新数组的一系列方法，保留原功能的基础上增加一些数据劫持的代码(也就是将数据变为可监控的)来实现拦截。

7个方法：push、pop、shift、unshift、splice、sort、reverse。

存在问题:

1.新增属性、删除属性, 界面不会更新。

2.直接通过下标修改数组, 界面不会自动更新。

解决方法：

vue2中 $set 可以解决这些问题。

5.  Vue3响应式原理 

通过(Proxy)代理实现: 拦截对象中任意属性的变化, 包括属性值的读写, 属性的添加, 属性的删除等操作。

通过(Reflect)(反射); 被代理的对象, 属性进行操作。

vue3.0 中不存在vue2.0 中说的这些问题

在一个对象中新增, 删除, 修改属性, 界面不会自动更新。

直接通过下标修改数组, 界面不会自动更新。

6. Proxy 与 Object.defineProperty 优劣对比 

1）Proxy的优势如下:

1. Proxy可以直接监听对象⽽⾮属性 。
2. Proxy可以直接监听数组的变化 。
3. Proxy有多达13种拦截⽅法,不限于apply、ownKeys、deleteProperty、has等等是 Object.defineProperty 不具备的 。
4. Proxy返回的是⼀个新对象,我们可以只操作新的对象达到⽬的,⽽ Object.defineProperty 只能遍历对象属性直接修改。
5. Proxy作为新标准将受到浏览器⼚商重点持续的性能优化，也就是传说中的新标准的性能红利 。

2）Object.defineProperty的优势如下:

1. 兼容性好,⽀持IE9。

7. Vue2和Vue3的diff的区别 

diff 算法有以下过程：

• 同级比较，再比较子节点
• 先判断一方有子节点一方没有子节点的情况(如果新的 children 没有子节点，将旧的子节点移除)
• 比较都有子节点的情况(核心 diff)
• 递归比较子节点

Vue2：

Vue2 的核心 Diff 算法采用了双端比较的算法，同时从新旧 children 的两端开始进行比较，借助 key 值找到可复用的节点，再进行相关操作。相比 React 的 Diff 算法，同样情况下可以减少移动节点次数，减少不必要的性能损耗，更加的优雅。

Vue3：

Vue3.x 借鉴了 ivi 算法和 inferno 算法

在创建 VNode 时就确定其类型，以及在 mount/patch 的过程中采用位运算来判断一个 VNode 的类型，在这个基础之上再配合核心的 Diff 算法，使得性能上较 Vue2.x 有了提升。该算法中还运用了动态规划的思想求解最长递归子序列。

详细内容比较多，但这个是重点部分。请跳转至：

Vue2 和 Vue3 的 Diff 算法的区别-CSDN博客

Vue diff算法_vue2 diff算法和vue3diff算法-CSDN博客

8. 虚拟 DOM 的优缺点 

优点：

• 性能优化：虚拟DOM通过减少不必要的DOM操作，提高渲染性能。它使用一个高效的diff算法来计算出真正需要更新的节点，最大限度地减少DOM操作，从而提高性能。
• 抽象化DOM操作：由于虚拟DOM以JavaScript对象为基础，不依赖真实平台环境，因此可以跨平台操作，例如在浏览器平台、Weex、Node等环境中使用。
• 无需手动操作DOM：Vue的虚拟DOM可以自动处理视图更新，开发者只需要关注数据变化，无需手动操作DOM，大大提高了开发效率。

缺点： 

• 首次渲染大量DOM时性能较差：由于虚拟DOM需要进行计算和比较，所以在首次渲染大量DOM时，可能会比直接操作DOM慢。
• 不适合小型项目：对于小型项目或简单页面，使用虚拟DOM可能会增加额外的计算开销，此时直接操作DOM可能更为简单高效。

9. 生命周期的理解

Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模版、挂载 Dom -> 渲染、更新 -> 渲染、卸载等一系列过程࿰