Vue 3 相比 Vue 2 进行了全面的升级和优化，涵盖了性能、开发体验、API 设计等多个方面。以下是 Vue 3 的主要改进和变化：

一、性能优化

1、更快的渲染速度

• 通过优化虚拟 DOM 的 diff 算法，减少不必要的渲染。
• 静态节点提升（Hoisting）：将静态节点提取到渲染函数外部，避免重复渲染。
• 缓存事件处理函数：减少不必要的重新绑定。

2、更小的打包体积

• 支持 Tree Shaking：按需引入功能模块，减少打包体积。
• 核心库体积从 Vue 2 的 ~20KB 压缩至 ~10KB。

3、更好的内存管理

• 使用 Proxy 替代 Object.defineProperty，减少初始化时的递归遍历，提升性能。

二、API 设计改进

1、Composition API

• Vue 2 使用 Options API，逻辑分散在 data、methods、computed 等选项中。

• Vue 3 引入 Composition API，通过 setup 函数按功能组织代码，逻辑更集中且复用性更强。

  import { ref, computed } from "vue";
  
  export default {
    setup() {
      const count = ref(0);
      const double = computed(() => count.value * 2);
      return { count, double };
    },
  };

2、更好的 TypeScript 支持

Vue 3 使用 TypeScript 重构，提供更完善的类型推断和类型安全。Composition API 天然支持 TypeScript，开发体验更友好。

3、新的响应式系统

• Vue 2 使用 Object.defineProperty 实现响应式，无法检测对象的新增、删除属性，也无法检测数组内元素的修改，数组长度的修改。

• Vue 3 使用 Proxy 和 Reflect 实现响应式，支持动态监听属性变化，包括数组索引和 length 的修改。

  const state = reactive({ count: 0 });
  state.count++; // 自动触发更新

4、核心功能按需引入

Vue 3 将大部分功能拆分为独立的模块，开发者可以根据需要导入特定的 API，而不是一次性引入整个 Vue 库。例如：引入 ref, reactive, computed

import { ref, reactive, computed } from "vue";

export default {
  setup() {
    const count = ref(0);
    const state = reactive({ name: "Vue 3" });
    const double = computed(() => count.value * 2);
    return { count, state, double };
  },
};

三、新特性与功能增强

1、Fragment（片段）

• Vue 2 要求模板必须有单个根元素。
• Vue 3 支持多根节点模板，减少不必要的包裹元素。

  <template>
    <div>Node 1</div>
    <div>Node 2</div>
  </template>

2、Teleport（传送）

• 将组件渲染到 DOM 中的任意位置，常用于模态框、通知等场景。

  <teleport to="body">
    <div class="modal">Modal Content</div>
  </teleport>

3、Suspense（异步组件）

• 简化异步组件的加载状态处理，提供统一的 fallback 插槽。

  <Suspense>
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <div>Loading...</div>
    </template>
  </Suspense>

4、自定义渲染器

• 提供自定义渲染器 API，支持非 DOM 环境的渲染（如小程序、Canvas）。

四、生命周期调整

1、钩子函数重命名

• beforeDestroy 改为 beforeUnmount。
• destroyed 改为 unmounted。

2、新增调试钩子

• onRenderTracked：追踪响应式依赖的访问。
• onRenderTriggered：追踪响应式依赖的变更触发。
• onServerPrefetch：SSR 服务相关钩子

3、删除部分钩子

删除beforeCreate和created钩子，改为setup()方法。

4、完整列表如下

钩子名称	vue2	vu3
创建前	beforeCreate	无（被 setup() 替代）
创建完成	created	无（被 setup() 替代）
挂载前	beforeMount	onBeforeMount
挂载完成	mounted	onMounted
更新前	beforeUpdate	onBeforeUpdate
更新完成	updated	onUpdated
卸载前	beforeDestroy	onBeforeUnmount
卸载完成	destroyed	onUnmounted
激活	activated	onActivated
停用	deactivated	onDeactivated
错误捕获	errorCaptured	onErrorCaptured
调试跟踪钩子	无	onRenderTracked
调试触发钩子	无	onRenderTriggered
数据预取钩子（SSR 服务中）	serverPrefetch	onServerPrefetch

五、其他改进

1、全局 API 调整

• Vue 2 的全局 API（如 Vue.nextTick）改为模块化导入（如 import { nextTick } from 'vue'）。
• 支持多个 Vue 实例共存，避免全局配置污染。

2、更好的错误处理

• 提供更清晰的错误提示和堆栈信息。
• 支持在组件级别捕获错误（onErrorCaptured）。

3、兼容性改进

• 提供迁移构建版本，支持渐进式升级。
• 兼容大部分 Vue 2 的语法和特性。

六、与 Vue 2 的对比总结

特性	Vue 2	Vue 3
响应式系统	Object.defineProperty	Proxy
API 设计	Options API	Composition API + Options API
性能	较慢	更快（虚拟 DOM 优化、Tree Shaking）
TypeScript 支持	有限	全面支持
新特性	无 Fragment、Teleport 等	支持 Fragment、Teleport、Suspense
生命周期钩子	beforeDestroy、destroyed	beforeUnmount、unmounted

七、总结

Vue 3 在性能、开发体验和功能上都有显著提升，主要改进包括：

• 性能优化：更快的渲染速度和更小的打包体积。
• Composition API：更灵活的逻辑组织方式。
• 新特性：Fragment、Teleport、Suspense 等。
• 更好的 TypeScript 支持：类型推断和类型安全更完善。

对于新项目，推荐直接使用 Vue 3；对于旧项目，可根据需求逐步迁移。

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24