Vue2与Vue3常见面试题

SailingCoder

已于 2024-02-23 15:33:51 修改

阅读量1.8k

点赞数

分类专栏：前端基础篇文章标签： vue.js vue 前端面试

于 2023-09-21 14:44:58 首次发布

本文链接：https://blog.youkuaiyun.com/qq_37834631/article/details/133134080

版权

本文深入探讨了Vue2与Vue3的区别，包括响应式系统的重构，引入了Composition API，v-if和v-for优先级变化，以及生命周期钩子函数的调整。Vue3利用Proxy API替换defineProperty API，提高了性能，减少了代码体积。文中还详细阐述了Vue3的响应式原理、优化措施，如Block tree和diff算法的改进，以及新特性，如Suspense、Teleport组件。此外，文章还讨论了Vue3中逻辑组织的改进，如Composition API，以及如何利用ref、reactive等新API。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、讲一下MVVM 和 MVC的区别

MVVM与MVC的区别有：

mvvm各部分的通信是双向的，而mvc各部分通信是单向的；
mvvm是真正将页面与数据逻辑分离放到js里去实现，而mvc里面未分离。

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

2、vue3和vue2不同点

a. 响应式系统的重构，

使用proxy替换Object.defineProperty属性，优势：

Proxy可直接监听对象添加/删除属性;
Proxy直接监听数组的变化
Proxy监听的目标是对象本身，不需要像Object.defineProperty那样遍历每个属性，有一定的性能提升

Vue 的响应式原理中 Object.defineProperty 有什么缺陷？为什么在 Vue3.0 采用了 Proxy，抛弃了 Object.defineProperty？

Vue 中使用 Object.defineProperty 进行双向数据绑定时，告知使用者是可以监听数组的，但是只
是监听了数组的 push()、pop()、shift()、unshift()、splice()、sort()、reverse() 这八种方法，其他
数组的属性检测不到。
Object.defineProperty 无法监控到数组下标的变化，导致通过数组下标添加元素，不能实时响
应；
Object.defineProperty 只能劫持对象的属性，因此对每个对象的属性进行遍历时，如果属性值也
是对象需要深度遍历，那么就比较麻烦了，所以在比较 Proxy 能完整劫持对象的对比下，选择
Proxy。
Proxy 不仅可以代理对象，还可以代理数组。还可以代理动态增加的属性。

b. 新增`组合式API`(Composition API)，更好的逻辑重用和代码组织:

setup配置
ref与reactive
watch与watchEffect
provide与inject

c. v-if和v-for的优先级

vue2 在一个元素上同时使用 v-if 和 v-for，v-for会优先执行。

而 vue3 中 v-if 总会优先于 v-for 生效。

d. 重构虚拟 DOM, diff算法

diff算法当data发生改变会根据新的数据生成一个新的虚拟dom ，新的虚拟dom和旧的虚拟dom进行对比，这个对比的过程就是diff算法。

vue2

vue2 diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom。

vue2是全量diff。会比较每一个vnode，而对于一些不参与更新的元素，进行比较是有点消耗性能的。

vue3

vue3 diff算法在初始化的时候会给每个虚拟节点添加一个patchFlags 做静态标记。

vue2是非全量diff。只会比较 patchFlags 发生变化的vnode，进行更新视图，对于没有变化的元素做静态标记，在渲染的时候直接复用。

e. 生命周期钩子函数有变化

setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，所以不需要显示的定义它们。其他的钩子都可以编写到 setup 内。

Vue3.0提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下：

Vue2	Vue3
beforeCreate	setup()
created	setup()
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeUnmount	onBeforeUnmount
unmounted	onUnmounted

组合式API中的钩子函数，通过在生命周期钩子前面加上 “on” 来访问组件的生命周期钩子，需要注册，并且只能在 setup 期间同步使用，因为它们依赖于内部的全局状态来定位当前组件实例。

f. 新的内置组件

Fragment: 在Vue2中: 组件必须有一个根标签；在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中，好处: 减少标签层级, 减小内存占用。

Teleport：是控制渲染位置的新指令。它的作用是在DOM中移动一个组件的内容而不改变组件的父级。

<teleport to="移动位置">
    <div v-if="isShow" class="mask">
        <div class="dialog">
            <h3>我是一个弹窗</h3>
            <button

最低0.47元/天解锁文章