vue2和vue3的区别

<>一. 根节点不同

* 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 被包含在<keep-alive>中的组件，会多出两个生命周期钩子函数。被激活时执行。
* 切换：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中
匿名插槽
子组件： <div> <slot></slot> </div> 父组件： <child> <span>我是插槽插入的内容</span> </child>
具名插槽
子组件： <div> <slot name="person"></slot> </div> 父组件： <child> <span slot="person">
我是插槽插入的内容</span> </child>
作用域插槽：父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。不过，我们可以在父组件中使用slot-scope
特性从子组件获取数据
<div> <slot :data="data"></slot> </div> 父组件： <child> <span slot-scope="data">
我是插槽插入的内容</span> </child>
* 在vue3中
匿名插槽：和在vue2中一样
具名插槽： 子组件： <div> <slot name="person"></slot> </div> 父组件： <child> <template
v-slot:person> <span>我是插槽插入的内容</span> </template> </child>
作用域插槽：
子组件： <div> <slot :data="data"></slot> </div> 父组件： <child> <span #data>我是插槽插入的内容
</span> === <span #default="{data}">我是插槽插入的内容</span> </child>
* 总结：
* 具名插槽使用方式不同：vue2使用slot='',vue3使用v-slot:''
* 作用域插槽使用方式不同：vue2中在父组件中使用slot-scope="data"从子组件获取数据，vue3中在父组件中使用 #data 或者
#default="{data}"获取

• « 上一篇：Autotools
• » 下一篇：unique（C++）函数