Vue2和Vue3的区别

1. 生命周期

vue2(左）和vue3（右）

创建前：BeforeCreate-----data和methods中的数据都没有初始化

创建后：Created-----实例创建完成? ? ? ? ? ? ? ? ? ? ? （vue3将BeforeCreate和Created合并为setup）

挂载前：BeforeMount() ----dom树已经生成，但还未挂载? ? ? ? ? ? ? ? ? ? ? ? ?? onbeforemount()

挂载后：Mounted----dom节点全部挂载完成? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?onmounted()

更新前：BeforeUpdate()----数据更新前调用? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?onbeforeupdate()

更新后：Updated()----数据已经更新，dom元素重新渲染? ? ? ? ? ? ? ? ? ? ? ? ? ? ??onupdated()

销毁前：BeforeDestory()----实例摧毁前调用，清除定时器或取消事件监听 onbeforeunmount()

销毁后：Destroyed()----实例已经摧毁? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?onunmount()

2.vue的响应式原理

通过数据劫持和发布者订阅者模式进行的，vue2中数据劫持是通过object.defineProperty(),而vue3中是通过Proxy

3.vue2和vue3最大的区别就是，vue3使用了Composition API (组合api)

4.vue的diff算法

通过旧的虚拟Dom树和新的Dom树进行比较，对有变化的dom节点进行更新。

• 比较只会在同层级进行，不会跨层级比较
• vue2是通过双向指针比较虚拟DOM，vue3通过最长递增子序列
• vue2会对所有dom节点进行比较，Vue3只会对动态节点进行比较

5.父子传参的方式不同

5.1? Vue2中的父子组件传参:
父传子

props：在父组件中，给子组件绑定一个自定义属性，在子组件中，通过props进行接收

子传父

自定义事件：在父组件中，给子组件绑定一个自定义事件，绑定事件的值为接收参数的函数，在子组件中，通过$emit发送数据

5.2? Vue3中的父子组件传参:

vue3中，父组件中引入子组件后，不需要注册可直接使用。父传子时，子组件中通过defineProps方法接收，子传父时，子组件中通过defineEmits方法发送。
?

6.是否支持碎片化（Fragment）

也就是说vue3可以有多个根节点,而vue2只能必须只有一个根节点来包裹