北京门户网站开发,宏大建设集团网站,国内国际时事最新消息,创建app平台一. 根节点不同
vue2中必须要有根标签vue3中可以没有根标签#xff0c;会默认将多个根标签包裹在一个fragement虚拟标签中#xff0c;有利于减少内存。
二. 组合式API和选项式API
在vue2中采用选项式API#xff0c;将数据和函数集中起来处理#xff0c;将功能点切割了当…一. 根节点不同
vue2中必须要有根标签vue3中可以没有根标签会默认将多个根标签包裹在一个fragement虚拟标签中有利于减少内存。
二. 组合式API和选项式API
在vue2中采用选项式API将数据和函数集中起来处理将功能点切割了当逻辑复杂的时候不利于代码阅读。在vue3中采用组合式API将同一个功能的代码集中起来处理使得代码更加有序有利于代码的书写和维护。
三. 生命周期的变化
创建前beforeCreate - 使用setup() 创建后created - 使用setup() 挂载前beforeMount - onBeforeMount 挂载后mounted - onMounted 更新前beforeUpdate - onBeforeUpdate 更新后updated - onUpdated 销毁前beforeDestroy - onBeforeUnmount 销毁后destroyed - onUnmounted 异常捕获errorCaptured - onErrorCaptured 被激活onActivated 被包含在中的组件会多出两个生命周期钩子函数。被激活时执行。 切换onDeactivated 比如从 A 组件切换到 B 组件A 组件消失时执行
四. v-if和v-for的优先级
在vue2中v-for的优先级高于v-if可以放在一起使用但是不建议这么做会带来性能上的浪费在vue3中v-if的优先级高于v-for一起使用会报错。可以通过在外部添加一个标签将v-for移到外层
五. diff算法不同
vue2中的diff算法
遍历每一个虚拟节点进行虚拟节点对比并返回一个patch对象用来存储两个节点不同的地方。用patch记录的消息去更新dom缺点比较每一个节点而对于一些不参与更新的元素进行比较是有点消耗性能的。特点特别要提一下Vue的patch是即时的并不是打包所有修改最后一起操作DOM也就是在vue中边记录变更新。React则是将更新放入队列后集中处理。
vue3中的diff算法
在初始化的时候会给每一个虚拟节点添加一个patchFlags是一种优化的标识。只会比较patchFlags发生变化的节点进行识图更新。而对于patchFlags没有变化的元素作静态标记在渲染的时候直接复用。
六. 响应式原理不同
vue2通过Object.definedProperty()的get()和set()来做数据劫持、结合和发布订阅者模式来实现Object.definedProperty()会遍历每一个属性。vue3通过proxy代理的方式实现。proxy的优势不需要像Object.definedProperty()的那样遍历每一个属性有一定的性能提升proxy可以理解为在目标对象之前架设一层“拦截”外界对该对象的访问都必须通过这一层拦截。这个拦截可以对外界的访问进行过滤和改写。当属性过多的时候利用Object.definedProperty()要通过遍历的方式监听每一个属性。利用proxy则不需要遍历会自动监听所有属性有利于性能的提升
七. 插槽方式不同
在vue2中
匿名插槽
子组件
divslot/slot
/div父组件
childspan我是插槽插入的内容/span
/child具名插槽
子组件
divslot nameperson/slot
/div父组件
childspan slotperson我是插槽插入的内容/span
/child作用域插槽父组件模板的所有东西都会在父级作用域内编译子组件模板的所有东西都会在子级作用域内编译。不过我们可以在父组件中使用slot-scope 特性从子组件获取数据
divslot :datadata/slot
/div
父组件
childspan slot-scopedata我是插槽插入的内容/span
/child在vue3中
匿名插槽和在vue2中一样 具名插槽
子组件
divslot nameperson/slot
/div
父组件
childtemplate v-slot:personspan我是插槽插入的内容/span/template
/child作用域插槽
子组件
divslot :datadata/slot
/div
父组件
childspan #data我是插槽插入的内容/span span #default{data}我是插槽插入的内容/span
/child总结
具名插槽使用方式不同vue2使用slot‘’,vue3使用v-slot:‘’作用域插槽使用方式不同vue2中在父组件中使用slot-scope“data从子组件获取数据vue3中在父组件中使用 #data 或者 #default”{data}获取
八. 样式穿透
vue2中
/deep/ .类名{}
::v-deep .类名{}vue3中
:deep (.类名{})
::v-deep(.类名{})
