前端经典面试题 | 吊打面试官系列之 Vue2和Vue3的区别 - 设计每日一贴-专注优秀UI设计与软件开发-北京兰亭妙微

前端经典面试题 | 吊打面试官系列之 Vue2和Vue3的区别

2023-1-9 前端达人

监测机制的变化

Vue3中使用了ES6中Proxy API 对数据进行代理，监测整个对象，而不再是某个属性。

消除Vue2中基于Object.defineProperty的实现所存在的诸多限制。

Vue3可以监测到对象属性的添加和删除也可以监听到数组的变化。

Vue3中支持Map、Set、WeakMap和WeakSet

数据的存放

Vue2中数据存放在data属性中

Vue3使用setup()方法，setup()方法在组件初始化构造的时候触发。

从vue引入ref或reactive
简单数据类型使用ref()方法进行处理，复杂数据类型使用reactive()方法进行处理。
使用setup()方法来返回响应式数据，在template可以获取这些响应式数据。

生命周期钩子

setup()：开始创建组件之前，在beforeCreate和created之前执行。

onBeforeMount()：组件挂载到节点之前执行。

onMounted()：组件挂载完成之后执行。

onBeforeUpdate()：组件更新之前执行。

onUpdated()：组件更新之后执行。

onBeforeUnmount()：组件卸载之前执行。

onUnmounted()：组件卸载之后执行

若组件被keep-alive包裹，则多出两个钩子函数
- onActivated()：被激活时执行。
- onDeactivated()：A组件切换到B组件。A组件消失时执行。

diff算法

Vue2：进行虚拟节点对比，并返回一个patch对象来存储两个节点的不同，最后用patch记录的消息去局部更新Dom。它会比较每一个Vnode但对一些不参与更新的元素，进行比较会消耗性能。

Vue3：diff算法在初始化时会给每个虚拟节点一个patchFlags（优化的一个标识）。只会比较patchFlags发生变化的Vnode，从而进行视图更新，对比没有变化的做静态标记，渲染时直接复用。

v-if和v-for优先级

Vue2中：v-for优先执行

Vue3中：v-if优先执行

注：最好不要把v-if和v-for同时用在一个元素上，这样会带来性能的浪费

来源：csdn

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

分享本文至：