本文首发微信公众号：前端徐徐。

前言

相信很多小伙伴在面试的时候都会被问道 Vue 2 和 Vue 3 的区别，但是大部分人都只能对原理进行一些对比，或者用法进行对比，但是很难从各个方面去剖析这个问题，如果你能从原理、生命周期、性能、编码方式、API、Diff 算法、打包构建、TS 支持这 8 个方面去做对比，肯定会让面试官刮目相看。下面我们就来看看这些区别把。

原理

主要是数据响应式上的区别，这也是最核心的区别

Vue.js 2 的响应式：

1. Object.defineProperty： Vue.js 2 使用 Object.defineProperty 来监听对象的属性访问和修改。当一个对象被传递给Vue实例的 data 选项时，Vue 会遍历对象的每个属性，并使用 Object.defineProperty 将其转换为"响应式"的属性。这样一来，当数据发生变化时，Vue 就能捕获到变化，并触发视图的更新。
2. 依赖追踪： 在 Vue.js 2 中，每当视图（模板）访问一个响应式对象的属性时，Vue 会在背后建立起一个依赖关系。这样，当属性发生改变时，Vue就能够找到对应的依赖，进而更新相关的视图。
3. 数组变异方法： 由于 Object.defineProperty 只能监听对象的属性访问和修改，Vue.js 2 对于数组的响应式处理需要特殊处理。Vue.js 2 通过重写了数组的原型方法，如 push、pop、splice 等，使得这些方法在被调用时能够触发视图的更新。

Vue.js 3的响应式：

1. ES6 Proxy： Vue.js 3 采用了 ES6 的 Proxy 代理，这是 JavaScript 的一种新特性。Proxy 可以拦截并重定义对象上的操作，使得可以监听到对象的任何属性的访问和修改。
2. 依赖追踪优化： Vue.js 3 在依赖追踪方面进行了优化，将其与 Proxy 相结合，从而更高效地进行数据追踪和更新。这也使得在 Vue.js 3 中，对数组的处理更加自然，无需像 Vue.js 2 一样重写数组的原型方法。
3. Composition API支持： Vue.js 3 的 Composition API 使得对数据的处理更加灵活，可以更好地组织组件逻辑，并减少了在大型应用中的数据追踪和管理的复杂性。

生命周期

主要区别是 Vue3 合并了一些钩子,同时新增了几个钩子,并通过组合式 API 让用户获得更多自定义钩子的灵活性。这些改变使得生命周期之间的关联更加清晰,也给用户提供了更好的逻辑组织方式。下面是一个比较列表

性能

1. 数据监听机制

• Vue2：通过Object.defineProperty()进行数据劫持，需要遍历所有属性，存在一定性能开销。
• Vue3：使用Proxy代理数据，直接监听对象，减少遍历属性时间，性能更好。

2. 编译优化

• Vue3：对编译过程进行了优化，包括静态节点提升和缓存事件处理函数等，使启动速度比 Vue2 快 10-100 倍。

3. 包体积

• Vue3：移除了一些不常用的 API，并优化了 Tree-Shaking，使打包体积相比 Vue2 小 10% 左右。

4. 内存占用

• Vue3：移除了一些内存占用高的功能，同时优化了部分内存分配，降低内存消耗。

5. SSR 优化

• Vue3：使用异步 SSR，大大减少主线程执行代码量，提升服务器端渲染性能。

Vue3 在初始化、渲染、内存占用等多个方面对 Vue2 有显著性能提升，使得 Vue3 可以承载更复杂的应用场景。

编码方式

1. Options API 和 Composition API

• Vue2：通过 Options API 进行编码，逻辑分散，不便于重用。
• Vue3：引入 Composition API，基于函数式编程，代码更聚合。

2. definingComponent

• Vue3：通过 definingComponent API 定义组件，语法更清晰。

3. Ref 和 Reactive

• Vue3：通过 Ref 和 Reactive API 声明响应式变量，语法更简洁。

4. setup

• Vue3：通过 setup 函数统一声明逻辑。Vue2 逻辑分散在多个选项中。

5. 异步组件

• Vue3：直接支持返回 Promise 的异步组件。

API

1. Options API 和 Composition API

• Vue2：主要通过 Options API 进行开发，如data、methods等。
• Vue3：推荐使用 Composition API，如ref、reactive、watch、computed等。

2. 移除过滤器 (filter)

• Vue2：可以使用 filter 对数据进行转换后显示。
• Vue3：移除了 filter，推荐使用方法或计算属性代替。

3. 全局和内实例 API 调整

• Vue3：删除了一些不常用的全局和内实例 API，并做了功能调整，如$on改为app.config.globalProperties。

4. 源码级 API

• Vue3：暴露了部分源码 API 用于扩展，如createRenderer。

Diff

1. 静态标记

• Vue2：通过标记静态根节点，跳过对这部分的 Diff。
• Vue3：使用 Shape Flags 更精确地标记静态根，提高 Diff 效率。

2. 优化逻辑

• Vue2：使用经典的双指针（双端比较）的 Diff 算法。
• Vue3：采用更加高效的单端比较的 Diff 算法，每个 VNode 都有一个唯一的标识。

3. 分块对比

• Vue3：支持对相邻重复节点进行分块比较，减少冗余 Diff，如列表中连续相同文本节点进行合并比较。

4. 异步渲染

• Vue3：支持组件异步渲染，等待组件完成再进行 Diff，避免无效对比，提高性能。

5. 代码减少

• Vue3：对核心 Diff 逻辑进行了裁剪，移除了冗余代码，优化后代码量减少超过 40%。

6. SSR Diff

• Vue3：新增了 SSR 环境下的 Diff 优化模式，避免不必要的客户端对比，加快渲染速度。

打包构建对比

1. 打包体积

• Vue3：移除了一些不常用的 API，同时优化了 Tree-shaking，与 Vue2 相比，打包后体积减小约 10%。

2. 依赖优化

• Vue3：对依赖进行了优化，裁剪不必要代码，减少冗余。

3. 构建速度

• Vue3：改进了编译过程，提高了构建速度，特别是 prod 模式下打包速度明显加快。

4. 编译优化

• Vue3：改用优化的自动化持久缓存，加速增量编译，配合新语法提升热重载速度。

5. Tree-shaking

• Vue3：编译支持更精确的 Tree-shaking，删除无用代码，如自动 Tree-shaking 样式表。

6. 模块化

• Vue3：源码实现了高度的 ESM 模块化，更好地支持 Tree-shaking、懒加载等能力。

7. 新特性支持

• Vue3：内置支持了 Fragment、Teleport、Suspense 等新特性。

TypeScript 支持

1. 内部实现

• Vue2：源码是 JavaScript 编写，需要手动维护类型定义。
• Vue3：源码直接采用 TypeScript 重写，类型信息内置。

2. 组件定义

• Vue2：使用.vue文件，需要额外的vue-class-component decorators。
• Vue3：可以直接以类的形式定义组件，更纯粹的 TS 体验。

3. Options API

• Vue2：Options API 缺乏类型推导。
• Vue3：增强了对 Options API 的类型推导。

4. Composition API

• Vue3：Composition API 全面采用泛型、接口等 TS 新语法，提供完整的类型支持。

5. 引用注册

• Vue3：改用统一的defineComponent方法注册组件，提供完整的 Props 检验和 IDE 提示。

6. TS 配置

• Vue3：优化了tsconfig.json，提供更严谨的 TS 类型检查。

7. 内置工具类型

• Vue3：导出了部分内置工具的 TS 类型，增强扩展性。

总结

总体而言，Vue3 对 Vue2 进行了全方位的升级：

1. 性能：Vue3 在初始化速度和渲染效率上有显著提高。
2. 功能：Vue3 添加了 Composition API、Fragment、Teleport 等前沿特性。
3. 架构：Vue3 使用 TypeScript 重写，整体架构更加清晰优雅。
4. API：废弃了一些 API，新增了组合式 API，提高了开发效率。
5. 组织：推荐函数式编程和 hooks，使代码逻辑更加聚合。
6. 构建：改进了编译和 Tree-shaking，使打包速度和体积都得到优化。
7. 生态：Vue3 的升级将促进相关工具链的进一步完善。