Vue2 与 Vue3 主要差异对比

Vue3 作为 Vue.js 的重大升级版本，在多个方面带来了显著改进。以下是 Vue2 与 Vue3 的主要差异对比：

一、响应式系统

Vue2 响应式

• 实现原理：使用 Object.defineProperty 劫持对象属性
• 局限性：
  • 无法检测新增/删除属性（需使用 Vue.set/Vue.delete）
  • 数组索引修改和长度变化无法监听（需重写数组方法）
  • 需要递归遍历对象属性，性能开销大

Vue3 响应式

• 实现原理：使用 ES6 Proxy 代理整个对象
• 优势：
  • 自动检测属性增删，无需特殊 API
  • 完美支持数组索引和长度变化监听
  • 按需递归，性能更优
  • 支持 Map、Set 等复杂数据结构

// Vue2 响应式示例
data() {
  return { obj: { a: 1 } };
},
methods: {
  updateObj() {
    this.obj.b = 2; // 不会触发视图更新
    this.$set(this.obj, 'b', 2); // 必须用 $set
  }
}

// Vue3 响应式示例
import { reactive } from 'vue';
const state = reactive({ a: 1 });
state.b = 2; // 自动触发更新

二、API 设计

Vue2（Options API）

• 组织方式：按功能选项组织（data、methods、computed 等）
• 问题：
  • 大型组件逻辑分散，难以维护
  • 复用逻辑依赖 mixins，易引发命名冲突
  • TypeScript 支持较弱

Vue3（Composition API）

• 组织方式：按逻辑功能组织，使用 setup() 函数
• 优势：
  • 逻辑高内聚，易于维护和复用
  • 支持自定义 Hook 函数（类似 React Hooks）
  • 完善的 TypeScript 支持
  • 更好的代码组织灵活性

// Vue3 Composition API 示例
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const increment = () => count.value++;
    
    onMounted(() => {
      console.log('组件已挂载');
    });
    
    return { count, increment };
  }
};

三、性能优化

主要改进：

1. Tree-shaking 支持：

   • 仅打包使用到的 API，减小体积
   • Vue3 核心库体积减小约 50%

2. 编译优化：

   • 静态节点提升：静态节点只创建一次，避免重复渲染
   • 补丁标记（Patch Flags）：标记动态节点类型，Diff 时仅对比动态部分
   • 事件缓存：减少重复创建事件处理函数

3. 渲染性能：

   • 虚拟 DOM 重构，Diff 算法效率提升 2 倍以上
   • 更新性能与动态节点数量相关，而非模板大小

四、新特性

特性	Vue2	Vue3	说明
Fragment	不支持	支持	组件可拥有多个根节点
Teleport	无	支持	将内容渲染到 DOM 任意位置（如全局弹窗）
Suspense	无	支持	处理异步组件加载状态
多个 v-model	需 .sync 修饰符	原生支持	支持多个双向绑定
TypeScript	支持有限	完全支持	代码库用 TS 重写

五、其他差异

生命周期钩子变化：

• beforeDestroy → beforeUnmount
• destroyed → unmounted
• 新增 onRenderTracked 和 onRenderTriggered 用于调试

全局 API 调整：

• 使用 createApp 替代 new Vue()
• 避免全局配置污染

模板改进：

• 支持多根节点模板
• 更好的 TypeScript 类型推断

---

总结对比表

维度	Vue2	Vue3
响应式	Object.defineProperty	Proxy
API 设计	Options API	Composition API
性能	全量 Diff	靶向更新 + Tree-shaking
体积	较大（22.8kB）	减小约 50%（10kB）
TypeScript	支持有限	原生支持
新特性	无 Fragment/Teleport	支持多根节点、Teleport、Suspense
逻辑复用	Mixins（有缺陷）	组合函数（灵活清晰）
适用场景	小型项目/IE11 支持	中大型项目/现代浏览器

Vue3 在性能、可维护性和开发体验上全面优于 Vue2，特别适合中大型项目。对于新项目，推荐直接使用 Vue3；对于现有 Vue2 项目，可通过官方迁移工具逐步升级。