vue2和vue3的区别

1. 双向绑定原理的改变

   • vue3 中使用了ES6 的 ProxyAPI 对数据代理，监测的是整个对象，而不再是某个属性。

   • 消除了 Vue 2 当中基于 Object.defineProperty 的实现所存在的很多限制

   • vue3可以监测到对象属性的添加和删除，可以监听数组的变化；

   • vue3支持 Map、Set、WeakMap 和 WeakSet。

2. Vue3支持碎片(Fragments)

   • Vue2在组件中只有一个根节点。

   • Vue3在组件可以拥有多个根节点。

3. API模式不同

   • Vue2与Vue3 最大的区别：Vue2使用选项式API（Options API）对比Vue3组合式API（Composition API）

4. 建立数据的方式不同

   • Vue2：这里把数据放入data属性中

   • Vue3：需要使用一个新的setup()方法，此方法在组件初始化构造的时候触发。

   • 使用以下三步来建立响应式数据:

     • 从vue引入ref或reactive

     • 简单数据类型使用ref()方法处理，复杂类型数据用reactive()处理

     • 使用setup()方法来返回我们的响应性数据，从而我们的template可以获取这些响应性数据

5. 生命周期钩子不同 — Lifecyle Hooks

   • setup() :开始创建组件之前，在beforeCreate和created之前执行。创建的是data和method

   • onBeforeMount() : 组件挂载到节点上之前执行的函数。

   • onMounted() : 组件挂载完成后执行的函数。

   • onBeforeUpdate(): 组件更新之前执行的函数。

   • onUpdated(): 组件更新完成之后执行的函数。

   • onBeforeUnmount(): 组件卸载之前执行的函数。

   • onUnmounted(): 组件卸载完成后执行的函数

   若组件被<keep-alive>包含，则多出下面两个钩子函

   • onActivated(): 被包含在中的组件，会多出两个生命周期钩子函数。被激活时执行 。

   • onDeactivated(): 比如从 A组件，切换到 B 组件，A 组件消失时执行。

6. 父子传参不同，子组件通过defineProps()进行接收，并且接收这个函数的返回值进行数据操作。

总结： vue3 性能更高, 体积更小, 更利于复用, 代码维护更方便