Vue 3 与 Vue 2 的全面对比

YuXiang

引言

本文将从 核心架构、API 设计、性能优化、新特性、生态兼容性 等维度，并结合Vue2的缺点以及Vue3的优势进行分析，探讨这些变化背后的设计思想和技术实现。

1. 核心架构的重构

1.1 响应式系统的革命性升级

Vue 2 的响应式实现：

基于 Object.defineProperty，通过递归遍历对象属性，为每个属性设置 getter 和 setter。
局限性：
- 无法检测对象属性的新增或删除（需手动调用 Vue.set 或 Vue.delete）。
- 对数组的索引操作（如 arr[0] = 1）和 length 修改无法监听，需通过重写数组方法（push、pop 等）实现响应式。

Vue 3 的响应式实现：

基于 Proxy代理整个对象，而非单个属性。
优势：
- 支持动态新增、删除属性，无需手动处理。
- 直接监听数组索引和 length 变化。
- 性能更优：Proxy 是原生语言特性，无需递归初始化，仅在访问时触发代理。

底层原理对比：

// Vue 2：Object.defineProperty 实现响应式
const obj = {};
Object.defineProperty(obj, 'count', {
  get() { /* 依赖收集 */ },
  set(newVal) { /* 触发更新 */ }
});

// Vue 3：Proxy 实现响应式
const proxy = new Proxy(obj, {
  get(target, key) { /* 依赖收集 */ },
  set(target, key, value) { /* 触发更新 */ }
});

1.2 Virtual DOM 优化

Vue 2 的 Virtual DOM：

全量对比新旧虚拟 DOM 树，即使静态内容也会被遍历。
性能瓶颈：组件规模大时，递归对比耗时增加。

Vue 3 的优化策略：

静态标记（Patch Flags）：
在编译阶段标记动态节点，仅对比动态部分。
Block Tree 优化：
将模板划分为动态块，减少遍历范围。
缓存事件处理函数：
避免不必要的重新渲染。

示例：

<!-- Vue 3 编译后的虚拟 DOM 结构 -->
<div>
  <span>Static Content</span>
  <span :class="dynamicClass">{{ dynamicText }}</span>
</div>

编译后，仅对 dynamicClass 和 dynamicText 进行动态追踪。

1.3 编译器与 Tree-Shaking 支持

Vue 2 的问题：

所有 API 和功能打包到生产环境，无论是否使用。
无法按需剔除未使用的代码（如 v-model、transition）。

Vue 3 的改进：

基于 ES Module 的 Tree-Shaking：
通过 import/export 语法，构建工具（如 Webpack、Rollup）可自动剔除未使用的代码。
模块化架构：
将核心功能拆分为独立模块（如 @vue/reactivity、@vue/runtime-core）。

Tree-Shaking 效果示例：
如果未使用 v-model，则相关代码不会被打包，减少体积约 30%。

2. API 设计的进化

2.1 Composition API vs Options API

Vue 2 的 Options API：

通过 data、methods、computed 等选项组织代码。
缺点：
- 逻辑分散：同一功能的代码可能分布在多个选项中。
- 复用困难：通过 Mixin 复用逻辑容易导致命名冲突。

Vue 3 的 Composition API：

基于函数式编程，通过 setup() 函数集中管理逻辑。
优势：
- 逻辑复用：通过自定义 Hook实现高内聚、低耦合。
- 更好的 TypeScript 支持。

代码对比：

// Vue 2 Options API
export default {
  data() {
    return { count: 0 };
  },
  methods: {
    increment() { this.count++; }
  }
};

// Vue 3 Composition API
import { ref } from 'vue';
export default {
  setup() {
    const count = ref(0);
    const increment = () => count.value++;
    return { count, increment };
  }
};

2.2 全局 API 的调整

Vue 2 的全局 API：

通过 Vue 构造函数暴露全局方法（如 Vue.component、Vue.directive）。
问题：所有全局配置影响所有组件实例。

Vue 3 的调整：

使用 createApp 创建隔离的 App 实例：

// Vue 3
import { createApp } from 'vue';
const app = createApp(App);
app.component('MyComponent', MyComponent);
app.mount('#app');

优势：不同应用实例的配置互不干扰。

2.3 生命周期钩子的变化

Vue 2 的生命周期：

beforeCreate、created、beforeMount、mounted 等。

Vue 3 的调整：

移除 beforeCreate 和 created，由 setup() 替代。

新增 onBeforeUnmount 和 onUnmounted：

import { onMounted } from 'vue';
export default {
  setup() {
    onMounted(() => {
      console.log('Component mounted!');
    });
  }
};

3. 性能优化的突破

3.1 更快的渲染与更新

优化 Diff 算法：动态节点标记使对比效率提升 2~5 倍。
事件侦听缓存：避免重复生成函数，减少内存占用。

3.2 更小的包体积

Vue 3 核心包体积约 10KB（gzip 后），比 Vue 2 减少 40%。
Tree-Shaking 后体积进一步优化。

3.3 内存占用与垃圾回收优化

Proxy 的懒加载特性减少初始化内存消耗。
更高效的依赖追踪机制，避免内存泄漏。

4. 新特性与功能扩展

4.1 Fragment（碎片）

Vue 2 中组件必须有一个根元素，Vue 3 支持多根节点：

<template>
  <header></header>
  <main></main>
  <footer></footer>
</template>

4.2 Teleport（传送门）

将组件渲染到 DOM 中的任意位置（如全局弹窗）：

1
2
3

<teleport to="#modal-container">
  <div class="modal">...</div>
</teleport>

4.3 Suspense（异步组件）

优雅处理异步组件的加载状态：

<Suspense>
  <template #default><AsyncComponent /></template>
  <template #fallback><LoadingSpinner /></template>
</Suspense>

Vue 3 与 Vue 2 的全面对比

Vue 3 与 Vue 2 的全面对比

引言

1. 核心架构的重构

1.1 响应式系统的革命性升级

1.2 Virtual DOM 优化

1.3 编译器与 Tree-Shaking 支持

2. API 设计的进化

2.1 Composition API vs Options API

2.2 全局 API 的调整

2.3 生命周期钩子的变化

3. 性能优化的突破

3.1 更快的渲染与更新

3.2 更小的包体积

3.3 内存占用与垃圾回收优化

4. 新特性与功能扩展

4.1 Fragment（碎片）

4.2 Teleport（传送门）

4.3 Suspense（异步组件）

5. 开发体验的提升

5.1 Vite 的引入

5.2 DevTools 的增强

6. 生态系统与兼容性

6.1 官方库的适配

6.2 浏览器兼容性