vue3和vue2的区别

1. 双向绑定数据原理不同。

vue2使用的是Object.defineProperty。
vue3使用的是ES6的proxy进行数据代理。

2. 生命周期不同。

vue2是create前后，mount前后，update前后和destroy前后。
vue3删除了create前后，取之代替的是setup。(注：setup先于create前后执行。)

3.是否支持碎片（fragments)

vue2不支持。
vue3支持。（即支持多个根结点）

4.API类型不同

vue2是选项式API。
vue3是组合式API。

5.父子传参不同

Vue2 父传子，用props ；子传父用事件Emitting Events。在Vue2 中，会调用this$emit 然后传入事件名和对象。

Vue3 父传子，用props;子传父用Emitting Events 。在Vue3 中的setup()中的第一参数content 对象中就有 emit,那么我们只要在setup()接收第二个参数中使用分解对象法取出emit 就可以在setup 方法中随意使用了。

6.指令与插槽不同

vue2 v-for优先级高于v-if，（因此不建议一起使用）；
vue2 使用插槽直接使用slot。

vue3 v-if优先级高于v-for，因此只会把当前v-if 当作v-for 的一个判断语句，不会相互冲突。
vue3使用插槽必须使用v-slot。

7. diff算法不同。

vue2 diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom。
diff算法会比较每一个vnode,而对于一些不参与更新的元素，进行比较是有点消耗性能的。

vue3 diff算法在初始化的时候会给每个虚拟节点添加一个patchFlags，patchFlags就是优化的标识。
只会比较patchFlags发生变化的vnode,进行更新视图，对于没有变化的元素做静态标记，在渲染的时候直接复用。

8.移除了一些API

1. Filters（过滤器）：在Vue 3中，过滤器被移除了。可以使用计算属性或方法来代替。

2. v-once指令：在Vue 3中，v-once指令被移除了。可以使用template标签或render函数来代替。

3. inline-template特性：在Vue 3中，inline-template特性被移除了。可以使用单文件组件或render函数来代替。

4. $els属性：在Vue 3中，$els属性被移除了。可以使用ref属性来代替。

5. $listeners属性：在Vue 3中，$listeners属性被移除了。可以使用v-on="$listeners"来代替。

6. $scopedSlots属性：在Vue 3中，$scopedSlots属性被重命名为$slots。可以使用v-slot指令来代替。

7. transition组件：在Vue 3中，transition组件被移除了。可以使用transition-group组件或CSS过渡来代替。

8. keep-alive组件：在Vue 3中，keep-alive组件的属性和事件被重命名了。activated事件被重命名为onActivated，deactivated事件被重命名为onDeactivated。include和exclude属性被重命名为includeInKeepAlive和excludeFromKeepAlive。

9. $on和$once方法：在Vue 3中，$on和$once方法被移除了。可以使用$emit方法和事件监听器来代替。

10. $dispatch和$broadcast方法：在Vue 3中，$dispatch和$broadcast方法被移除了。可以使用provide和inject来代替。

参考链接：https://blog.csdn.net/weixin_56263402/article/details/128799953
https://blog.csdn.net/m0_62018311/article/details/131011249