Vue2和Vue3的区别

前言

2022年1月20 日，Vue 作者尤大大在 GitHub 上发布最新公告，表示“Vue 3 将在 2022 年 2 月 7 日成为新的默认版本！” 随着Vue3.0成为新的默认版本，越来越多的公司开始用vue3从事项目的开发，vue经历从2.0到3.0更新也有着很多的更新优化，所以理解和掌握两个版本的区别对于我们开发者来说是十分重要的，接下来我会着重于Vue3对于Vue2优化的方向说⼀下两个不同版本的区别。

options API 和 composition API

代码可读性上：

Vue2中选项API（options API）格式的代码的可读性较差，比如需要实现某一个功能代码涉及到props、data、methods、computed、watch等属性的时候，就会出现已下几个代码块：

• 在 props 中接收参数
• 在 data 中定义变量
• 在 watch 中监听变化
• 在 computed 中定义需要使用到的计算属性
• 在 methods 中定义事件响应方法

这样对相同数据进行操作使用的代码会被分割到各个属性内，是很不利于代码的阅读的.

Vue3的组合式API（composition API）就对这一缺点进行了优化，使用组合式API我们能够将我们想要关联的代码都放到一起，这样大大的增加了代码的可读性和可维护性。

在逻辑复用上：

Vue2中使用的选项API（options API），使我们的代码中大量的使用到了this

组件中的 props, data，methods 都是绑定到 this 上下文，然后由 this 去访问，很不利用代码逻辑的复用

而Vue3使用的组合式API（composition API）在涉及到跨组件之间提取、复用逻辑时，就会非常的灵活

打破了this的限制，一个合成函数只依赖于它的参数和全局引入的 Vue APIs，而不是 this 上下文。我们只需要将组件中你想复用的那部分代码抽离，然后将它导出为函数就可以了。

正因为Vue2的API中大量的使用到了this，所以与 Typescript 集成时兼容性不好，主要是因为 Vue 依赖于 this 上下文来抛出属性，而且相较于简单的 JavaScript，this 在 Vue 组件中有很奇特的地方 (比如：methods 属性里面定义的函数里的 this 指向的是组件实例，而不是 methods 对象)；

而Vue3的（composition API）基于函数的 API 天然对类型推导很友好，因为 TS 对函数的参数、返回值和泛型的支持已经非常完备。

总结：

• Vue3使用composition API，让组件拥有了更加良好的代码组织结构；
• Vue3采用函数式编程方式，打破了this的限制，能够更好的复用性，真正体现实现功能的高内聚低耦合，更利于代码的可扩展性和可维护性。
• Vue3更友好的支持兼容TS

响应式原理

Vue2：

1. Object.defineProperty只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历。
2. 在遇到一个对象的属性还是一个对象的情况下，需要递归监听，对性能影响比较大。
3. 由于Vue会在初始化实例时对属性执行getter/setter转化，所有属性必须在data对象上存在才能让Vue将它转换为响应式。
4. 对于已经创建的实例，Vue 不允许动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, propertyName, value) 或vm.$set方法向嵌套对象添加响应式属性。(深入响应式原理)
5. Object.defineProperty，不具备监听数组的能力，需要重新定义数组的原型来达到响应式。（变异数组方法）

Vue3：

1. 基于Proxy和Reflect，可以原生监听数组，可以监听对象属性的添加和删除或多层嵌套数据结构的响应。
2. Proxy代理的是整个对象，而不是对象的某个特定属性，不需要我们通过遍历来逐个进行数据绑定。
3. 不需要一次性遍历data的属性，可以显著提高性能。