vue2与vue3的区别-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue2与vue3的区别。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

引言：本文讲的是vue2与vue3的区别，其实这算是老生常谈了，vue3出的时间也很久了，在vue2的基础上使得整个框架更加的轻便，在企业中应用vue3的也不少，但是vue2作为经典且稳定版本也有很多项目在使用，接下来就讲讲vue2与vue3有哪些区别。

一、响应式原理

响应式作为vue关键的特性，vue3在vue2上也有很多提升。

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

Vue2是使用Object.defineProperty，它只能劫持对象的属性，所以它需要深度遍历data中的每个属性，这种方式对于数组很不友好，而且对象观测后，新增的属性就不是响应式的，不过可以用Vue.set()来添加新的属性；

vue3：是使用Proxy，Proxy可以劫持整个data对象，然后递归返回属性的值的代理即可实现响应式；代理对象和反射对象要相互配合来实现响应式。

vue3其实实现了深层检测

二：定义区别

在vue2中定义数据变量是data(){}，创建的方法要在methods:{}中。(但其实在企业的项目中都是vue2结合ts，都是直接定义变量和函数，是不需要书写到data（){}内部的。

而在vue3中直接在setup(){}中，在这里面定义的变量和方法因为最终要在模板中使用，所以最后都得return。如果没有return该变量，是无法使用的。

三、生命周期不同

vue2中的生命周期
- beforeCreate 组件创建之前
- created 组件创建之后
- beforeMount 组价挂载到页面之前执行
- mounted 组件挂载到页面之后执行
- beforeUpdate 组件更新之前
- updated 组件更新之后
vue3中的生命周期
- setup 开始创建组件
- onBeforeMount 组价挂载到页面之前执行
- onMounted 组件挂载到页面之后执行
- onBeforeUpdate 组件更新之前
- onUpdated 组件更新之后