vue2与vue3的区别

这篇博客我会从原理、日常项目使用、性能优化三个大方面进行阐述。

响应式原理

vue2的响应式原理大家应该都很熟悉了。

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

这里说一下object.defineProperty的用法以及优缺点。

• 可以检测对象中数据发生的修改
• 对于复杂的对象，层次很深的话，是不友好的，需要进行深度监听，这样需要递归到底（缺点）
• 对于一个对象中，新增、删除对象，object.defineProperty()是不能观测实现的，可通过Vue.set()和Vue.deletez()来实现

在vue3中，则是使用了Proxy来创建响应式对象，仅getter/setter用于ref.

vue3中使用了proxy，解决了数组无法通过下标修改、无法监听到对象属性的新增和删除的问题。

具体关于proxy和reflect的知识点可以前往ES6官网；具体ref和reactive的区别会在新的一篇文章中讲述。

项目中使用时的区别

1. vue3使用的是组合式API，没有this，在vue2中则使用的是选项式API；
2. vue3中的生命周期没有created,卸载组件时使用的onMount(),同时增加setup，可代替created周期
3. vue3中的v-if的优先级要高于v-for
4. 新增加了Teleport传送门组件
5. template模板语法中可包含多个同级的div
6. 一些全局注册，例如mixin、注册全局组件等use改成了app实例的调用，而不是vue类
7. v-model应用于组件时，相比于vue2能够监听事件和传值的改变；在vue2中，只能监听onChange事件

性能方面

1. vue3使用的是函数编程、可以通过按需引入，能更好的tree-shaking
2. vue3能更好的支持ts
3. 相比于vue2，vue3增加了静态节点，会对静态节点进行标识，提升了编译效率