Vue.js - Vue.js 3 较 Vue.js 2 带来的变化与改进详解（Vue3新特性）

作者：hangge | 2026-01-19 08:58

一、基本介绍

1，发展历程

（1）Vue.js 诞生于 2014 年，是由 Evan You 开源的轻量级前端框架。相比于 React 和 Angular 框架，Vue.js 显得更简单、更容易理解和上手。

（2）2016 年 10 月，Evan You 发布了 Vue.js2.0 版本，并定义为渐进式框架。

（3）2020 年 9 月，Evan You 对 Vue.js2 进行了重构，并发布了 Vue.js3 版本，新增了 setup 语法、Composition API、TypeScript 等特性。

2，Vue.js 2 的缺点

（1）对 TypeScript 的支持不友好：Vue.js 2 对 TypeScript 的支持不友好，对构建大型项目不利（Vue.js 3 已支持）。

（2）Mixin 混入缺陷：Vue.js2 使用 Mixin 混入来抽取相同代码逻辑，但当一个组件有多个 Mixin 时，代码会变得难以阅读，因为不知道某个属性来自哪个 Mixin，并且多个 Mixin 中的属性容易发生冲突。

（3）响应式系统缺陷：Vue.js2 采用 Object.definedProperty 来进行数据劫持，这种方式存在一些缺陷，比如无法劫持和监听对象添加或删除属性时的变化，无法遍历对象的每个属性，包括对于对象属性的对象需要进行深度遍历，导致性能低下。

（4）逻辑零散：Vue.js 2 使用 Options API 编写组件，当实现某个功能时，对应的代码逻辑会被拆分到各个属性中，一旦组件变得复杂，逻辑就会变得零散。

二、Vue.js 3 带来的新变化

1，monorepo 源码管理

（1）Vue.js 3 对项目管理进行了重大重构，采用 monorepo 方式来管理。

提示：mono 是单个的意思，repo 是 repository（仓库）的简写。monorepo 的意思是将许多项目的代码存储在同一个 repository 中。

（2）Vue.js 2 和 Vue.js 3 源码管理方式对比如下图所示。

Vue.js 2 的源码托管在 src 目录，然后依据功能拆分出了 compiler（模板编译的相关代码）、core（与平台无关的通用运行时代码）、platforms（平台专有代码）、server（服务端渲染的相关代码）、sfc（.vue 单文件解析相关代码）、shared（共享工具代码）等目录。

而 Vue.js 3 将不同的模块拆分到了 packages 目录下的子目录中，每个模块都可以看作一个独立的项目，具有自己的类型定义、API、测试用例等。将每个模块划分为独立的项目，不仅让整个结构更清晰，也更容易让开发者阅读、理解和修改模块代码，同时提高了代码的可维护性和扩展性。

2，采用 TypeScript 进行重构

（1）Vue.js2 整个项目使用 Flow 进行类型检测，Flow 在很多复杂场景中对类型的支持并不是非常友好。

（2）从 Vue.js3 开始，项目全面采用 TypeScript 进行重构。如今 Vue.js3 对 TypeScript 的支持也越来越友好，在 TypeScript 的加持下，Vue.js3 可以编写更加健壮的代码，同时更容易开发大型项目。

3，采用 Proxy 进行数据劫持

（1）Vue.js 2 采用 Object.definedProperty 进行数据劫持，这种方式会存在一些缺陷，比如当给对象添加或者删除属性时，是无法进行劫持和监听的。为了解决该问题，Vue.js 官网提供了专门的 API，比如 vm.Sset 或 vm.Sdelete。事实上，这些都是一些 hack 方法，会增加开发者学习新 API 的成本。

（2）而 Vue.js3 采用 Proxy 实现数据劫持。当给对象添加或者删除属性时，Proxy 可以劫持和监听到，因为 Proxy 劫持的是整个对象，并且 Proxy 能劫持的类型比 Object.definedProperty 更丰富，不仅可以劫持 set、get 方法，还支持劫持 in、delete 操作等。

4，编译阶段的优化

（1）Vue.js3 在编译阶段进行了多项优化，以提高应用程序的性能和效率，具体如下：

生成 BlockTree：在编译阶段，Vue.js3 对静态模板进行分析，生成 BlockTree，以便更好地进行性能优化。Block Tree 是 Vue.js3 中的新概念，是一个基于模板静态分析的数据结构，用于描述模板和其子模板之间的关系，从而提高渲染效率。
slot 编译优化：Vue.js3 对 slot 的生成进行优化，对于非动态 slot 中属性的更新，只会触发子组件的更新，从而减少更新次数和计算量。
diff 算法优化：相比于 Vue.js2，Vue.js3 在 diff 算法上进行了多项优化，采用更高效的算法和数据结构，以减少更新操作的次数和计算量，提高应用程序的性能。

（2）上述这些优化措施使 Vue.js3 在性能和效率方面有较大的提升，可以提供更好的开发体验和用户体验。

5，Composition API

（1）Vue.js 2 使用 Options API 来编写组件，其中包含 data、props、methods、computed 和生命周期等选项。在实现某个功能时，对应的代码逻辑会被拆分到各个属性中，一旦组件变得更大或更复杂，逻辑就会变得非常分散，需要在多个选项之间寻找，这不利于后期的维护和扩展。

（2）相比之下，Vue.js 3 主要采用 Composition API 编写组件，同时兼容 Options API。Composition API 包含 ref、reactive、computed、watchEffect、watch 等函数，Composition API 可以将相关的代码放在同一处进行处理，封装成一个 Hook 函数来支持数据的响应式，并避免 Mixins 混入带来的缺陷。这样可以更加方便地实现在多个组件之间共享逻辑，也能够提高代码的可读性和可维护性。措施使 Vue.js3 在性能和效率方面有较大的提升，可以提供更好的开发体验和用户体验。

6，移除一些非必要 API

Vue.js 3 移除了 Vue 实例中的 Son、Soff 和 SonceAPI，还移除了一些特性，比如 filter 和内联模板等。