一、回答点

监测机制的变化、Fragments(碎片)的更新、API模式的变更、数据的存放、生命周期钩子、父子传参等。。

二、深入回答

监测机制的变化

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

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

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

Vue3中支持Map、Set、WeakMap和WeakSet

Fragments(碎片)

Vue2在组件中只能有一个根节点。

Vue3在组件中可以拥有多个根节点。

API模式的变化

Vue2使用选项式API(Options API)。Vue3使用组合式API(Composition API)

数据的存放

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组件消失时执行。

父子传参

子组件通过defineProps()进行接收,并且接收这个函数的返回值进行相应操作。

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同时用在一个元素上,这样会带来性能的浪费

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐