Vue2和Vue3的区别

一、他们的双向数据绑定原理发生了变化（响应式）

Vue2 : 的双向绑定是利用ES5的一个API object.defineProperty() 对数据进行劫持 结合 发布订阅模式的方式来实现。

Vue3 : 的双向数据绑定是使用了ES6的Proxy API对数据代理进行数据劫持。

二、它们的API不同

Vue2 : 使用的选项类型API ，在代码里分割了不同的属性：data,computed,method等。

Vue3 : 使用的组合类型API， 新的合成型API， 能让我们使用方法来分割，相比于Vue2API使用属性来分组，这样代码更加简便和整洁 。

三、定义数据变量和方法不同

Vue2 ：把数据放到了data里，在Vue2 中定义数据变量是data(){}，创建方法要在method:{}。

Vue3 : 把数据和方法直接下载钩子函数setup()中。

四、Vue3新加入了TypeScript 的支持

五、生命周期钩子函数不同

Vue2 :

• beforeCreate 组件创建之前；
• created 组件创建之后；
• beforeMount 组件挂载到页面之前；             
• Mounted 组件挂载之后；
• beforeUpdate 组件更新之前；
• updated 组件更新之后； 
• beforeDestory；实例销毁之前；
• destroyed 实例销毁后

Vue3 :

• setup 开始创建组件
• onBeforeMount 组件挂载到页面之前 
• onMounted 组件挂载到页面之后执行
• onBeforeUpdate 组件更新之前
• onUpdated 组件更新后
• onBeforeUnmount 组件销毁之前
• onUnmounted 组件销毁后

六、指令跟插槽不同

Vue2 : 使用slot   直接使用slot ; v-for与v-if在Vue2中同时使用优先级高的是v-for ，不建议一起使用（消耗性能）。

Vue3 : 使用slot   必须是v-slot形式 ； v-for与v-if在Vue2中同时使用优先级高的是v-for ，不建议一起使用（消耗性能）。

总结：Vue3比Vue2初始渲染和更新渲染更快，打包数据减少，运行速度快。