写在前面

自己一开始就是接触的Vue3，但是在学习Vue3的深入知识点时，总会想去多了解一些为什么要这样做？那么我想从Vue2和Vue3的区别去了解一下Vue3的更多知识。从以下几点：

代码风格
TS支持
API
生命周期函数
响应式原理

如果有缺漏，还请补充。

一、代码风格

vue2

Vue2中采用的是选项式API，数据和逻辑功能分开管理，分别在不同的选项对象中定义。其中，数据在data区域进行维护，自定义方法在methods区域进行维护，计算属性包裹在computed中，其钩子函数在options区域进行维护。

Vue3

Vue3采用的是组合式API风格，最新的语法支持使用setup语法糖包裹代码，在该区域可以书写数据以及与数据的交互逻辑。

Vue3的风格让业务逻辑和数据交融在一起，阅读性更好，降低了维护成本。

二、TS支持

Vue2不支持TS语法，Vue3支持使用TS来实现业务逻辑，更适合大型项目的开发。

好处： TS作为JS的超集，提供了严格的类型系统，能够帮助开发者约束核心数据。同时，TS支持静态编译，让开发者能预先发现一些潜在的问题，保证了开发过程中的规范性和安全性。

三、API

Vue3新增了像ref、reactive这样创建响应式对象的方法，原来的响应式数据是写在data中的。Vue3还提供了computed方法，能够去计算传入其内部的响应式数据变化。

四、生命周期函数

Vue2的生命周期函数有：

创建前后	更新前后	挂载前后	销毁前后
beforeCreate	beforeUpdate	beforeMount	beforeDestroy
created	updated	mounted	destroyed

Vue3的生命周期函数改动：

删除了beforeCreate、created、beforeDestroy和destroyed。

其余生命周期还有：

这些生命周期函数都可以写在setup语法糖包括的范围内。

挂载前后	更新前后	卸载前后
onBeforeMount	onBeforeUpdate	onBeforeUnmount
onMounted	onUpdated	onUnmounted

五、响应式系统设计原理

Vue2中采用的是Object.defineProperty来实现响应式数据的劫持，使用Vue.set()或vm.$set()来为响应式对象动态添加一个属性，保证这个属性也是响应式的。

Vue2还会对每个响应式数据定义一个get陷阱和set陷阱，在响应式数据的属性被访问或者修改时进行调用。

Vue3中采用的是proxy实现响应式数据的拦截，动态添加的属性自动成为响应式。

那么为什么Vue3要更改响应式的实现原理呢？

第一点：

在组件初始化阶段，Object.defineProperty()方法需要对所有需要的响应式设计的数据进行遍历，并为每个属性添加一个get和set方法，当数据量庞大时，这个过程会非常耗时。

第二点：

运行时，访问属性：

当访问一个深层次的属性，Vue2会递归地查找这个属性。如果该属性是响应式的，会触发该属性的get方法，收集依赖。

修改属性：当修改一个属性时，会触发该属性的set方法。

新增属性：

当在新增一个属性时，不管是在浅层还是深层新增，都不会默认将该属性变为响应式。需要使用Vue.set或vm.$set添加一个响应式属性。

所以说，在初始化阶段Vue2遇到大量响应式数据，性能不好。在运行时如果需要访问一个属性，需要递归地去查找；新增一个响应式数据，则需要通过set方法去显式保证响应性。

而在Vue3中，初始化阶段只需要创建一个Proxy对象，不需要显式去定义每个属性的get和set方法，这样做性能开销小；运行阶段对于添加的属性能够自动的变成响应式。

六、其他区别

插件：

Vue2的支持的插件和库十分丰富。 Vue3的API和架构更新，支持的库相对少一些。

工具库：

Vue2通常使用Webpack构建项目。 Vue3使用Vite构建项目。

官方支持

官方目前不推荐使用Vue2构建项目，新项目使用Vue3已经成为了一种大趋势。

总结

限于自己的学习深度，这里只梳理了一些大致区别。后续Vue2将成为历史，Vue3将会是持续学习的目标。

Vue2和Vue3的区别--Vue篇（二）