Vue3 正式版发布已经过了几个月了，Vue3 作为一个大的改动版本，在性能和体积上做了不少优化，然而我们还是需要了解下 Vue3 和 Vue2 两者的区别，这样可以更好的为升级做准备，也能更好地去应用起来，抛弃旧的思想，拥抱新的变化。接下来针对以下几点进行描述。
监测机制的变化
Vue2 在属性依赖和收集使用的是 Object.defineProperty API 来实现，缺点就是无法监听对象新增属性变化以及数组下标变化，还有其他数据类型（Map，WeakMap，Set，WeakSet）的变化。
Vue3 使用新的 Proxy 对象，完美解决了上面的问题。
新的 API
Vue2 使用的是选项式（Optional）API，Vue3 使用的是组合式（Composition）API。写法上有差异。
碎片(Fragments)
Vue2 只能有一个根节点，而 Vue3 支持多个根节点
初始化数据方式
Vue2 把数据放到 data 属性中
Vue3 新增一个 setup() 方法用来初始化组件的状态
- 从 vue 引入
ref或reactive - 简单数据类型使用
ref()方法处理，复杂类型数据用reactive()处理 - 使用
setup()方法来返回我们的响应性数据，从而我们的template可以获取这些响应性数据
生命周期钩子不同
setup(): 开始创建组件之前，在 beforeCreate 和 created 之前执行。创建的是 data 和 methodonBeforeMount(): 组件挂载到节点上之前执行的函数。onMounted(): 组件挂载完成后执行的函数。onBeforeUpdate(): 组件更新之前执行的函数。onUpdated(): 组件更新完成之后执行的函数。onBeforeUnmount(): 组件卸载之前执行的函数。onUnmounted(): 组件卸载完成后执行的函数
若组件被<keep-alive>包含，则多出下面两个钩子函
onActivated(): 被包含在中的组件，会多出两个生命周期钩子函数。被激活时执行 。onDeactivated(): 比如从 A 组件，切换到 B 组件，A 组件消失时执行。
父子传参不同
子组件通过 defineProps() 进行接收，并且接收这个函数的返回值进行数据操作。
总结
vue3 进行了全新重新 Vue2，在性能上更高, 体积上更小, 更利于复用, 代码维护更方便
