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()方法，
      此方法在组件初始化构造的时候触发。

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

1.从vue引入 ref 或 reactive
2.简单数据类型使用 ref() 方法处理，
复杂类型数据用 reactive() 处理

3.使用 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()进行接收，并且接收这个函数的返回值进行数据操作。

7. 总结 ​

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