目录
一、回答点
二、深入回答
监测机制的变化
Fragments(碎片)
API模式的变化
数据的存放
生命周期钩子
父子传参
diff算法
v-if和v-for优先级
一、回答点
监测机制的变化、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()进行接收,并且接收这个函数的返回值进行相应操作。
-
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咨询、用户体验公司、软件界面设计公司