持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第20天，点击查看活动详情

前言

掘友们，大家好啊，今天突然有一个想法，就很莫名其妙的。从入职到现在，已经快一年了，公司使用的技术栈，一直都是vue2。不管是新功能，还是bug什么的，都在和vue2打交道。感觉长时间不接触新的技术栈，再用起来就非常的生疏了。

所以，小编今天从零搭建了vue3的项目模型，安装了vue-cli、vuex（状态管理仓库）、Vue-Router（路由模块）等，又熟悉了vue3的生命周期，以及新特性。下边是小编总结的关于vue2和vue3的区别，以及新特性。

双向数据绑定原理不同

VUE2： Vue2 的响应式原理是核心是通过Object.defindeProperty 中的访问浏览器属性中的 get 和 set 方法，data 中声明的属性都被添加了访问器属性，当读取 data 中的数据时自动调用 get 方法，当修改 data 中的数据时，自动调用 set 方法，检测到数据的变化，会通知观察者 Wacher，观察者 Wacher自动触发重新render 当前组件（子组件不会重新渲染）,生成新的虚拟 DOM 树，Vue 框架会遍历并对比新虚拟 DOM 树和旧虚拟 DOM 树中每个节点的差别，并记录下来，最后，加载操作，将所有记录的不同点，局部修改到真实 DOM 树上。

VUE3： vue3中使用了ES6的Proxy API对数据代理。

vue3支持多个根节点

定义数据变量的方法不同

VUE2: 在vue2中定义数据变量是data(){}中 ，并且需要return出去。创建的方法要在methods:{} 创建中。

VUE3： 使用setup()方法响应数据。

生命周期钩子函数不同

VUE2：

• beforeCreate 组件创建之前
• created 组件创建之后
• beforeMount 组件挂载到页面之前执行
• mounted 组件挂载到页面之后执行
• beforeUpdate 组件更新之前
• updated 组件更新之后

VUE3:

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

vue3除了这些以外还引入了onRenderTracked 和onRenderTriggered函数。

父子传参不同

vue2：父传子，用props,子传父用事件 Emitting Events。在vue2中，会调用this$emit然后传入事件名和对象。

vue3：父传子，用props,子传父用事件 Emitting Events。在vue3中的setup()中的第二个参数content对象中就有emit，那么我们只要在setup()接收第二个参数中使用分解对象法取出emit就可以在setup方法中随意使用了。

插槽的手机用方式

vue2中直接使用slot，而在vue3中，则需要使用v-slot的形式