Vue2 与 Vue3 对比：从 Options API 到 Composition API 的演进

前言

Vue 3 自 2020 年正式发布以来，在性能、开发体验和生态上都有显著提升。本文从 API 设计、响应式原理、性能优化等维度对比 Vue 2 与 Vue 3，帮助开发者理解升级带来的变化，并为项目迁移提供参考。

一、API 风格对比

1.1 Options API vs Composition API

Vue 2 采用 Options API，将 data、methods、computed 等按选项分类组织：

javascript 复制代码

// Vue 2 - Options API
export default {
  data() {
    return {
      count: 0,
      message: 'Hello'
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  computed: {
    doubleCount() {
      return this.count * 2
    }
  }
}

Vue 3 引入 Composition API，通过 setup 或 <script setup> 将相关逻辑聚合在一起：

javascript 复制代码

// Vue 3 - Composition API
<script setup>
import { ref, computed } from 'vue'

const count = ref(0)
const message = ref('Hello')

const increment = () => {
  count.value++
}

const doubleCount = computed(() => count.value * 2)
</script>

Composition API 的优势在于逻辑复用更灵活，可以抽取成可复用的组合式函数（Composables）。

1.2 生命周期映射

Vue 2	Vue 3 (Composition API)
beforeCreate	setup()
created	setup()
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted

二、响应式系统

2.1 实现原理差异

Vue 2 使用 Object.defineProperty 实现响应式，存在以下限制：

无法检测新增/删除的属性，需使用 Vue.set / this.$delete
无法监听数组索引和 length 变化
初始化时需递归遍历所有属性，性能开销较大

javascript 复制代码

// Vue 2 无法响应
this.obj.newProp = 'value'  // 不会触发更新
this.$set(this.obj, 'newProp', 'value')  // 需手动处理

Vue 3 采用 Proxy 实现响应式：

可监听属性的新增、删除
支持 Map、Set、WeakMap、WeakSet
懒代理，按需收集依赖，性能更好

javascript 复制代码

// Vue 3 天然支持
const state = reactive({ count: 0 })
state.newProp = 'value'  // 自动响应

2.2 ref 与 reactive

Vue 3 提供两种响应式引用方式：

ref ：适用于基本类型，通过 .value 访问
reactive ：适用于对象，直接解构会丢失响应性，需配合 toRefs

javascript 复制代码

const count = ref(0)
count.value++  // 正确

const state = reactive({ name: 'Vue' })
const { name } = toRefs(state)  // 保持响应性

三、性能与体积

指标	Vue 2	Vue 3
打包体积	约 63KB (gzip)	约 34KB (gzip)，减少约 41%
初始渲染	基准	快约 1.3~2 倍
更新性能	基准	快约 1.3~2 倍
内存占用	基准	减少约 50%

Vue 3 通过 Tree-shaking、静态提升、预字符串化等编译优化，以及重写的虚拟 DOM diff 算法，显著提升了运行时性能。

四、新特性与改进

4.1 Teleport（传送门）

Vue 3 内置 Teleport，可将组件渲染到 DOM 其他位置，常用于 Modal、Toast 等：

vue 复制代码

<template>
  <Teleport to="body">
    <div class="modal">弹窗内容</div>
  </Teleport>
</template>

4.2 多根节点（Fragment）

Vue 2 要求单根节点，Vue 3 支持多根节点：

vue 复制代码

<!-- Vue 3 合法 -->
<template>
  <header>头部</header>
  <main>主体</main>
  <footer>底部</footer>
</template>

4.3 TypeScript 支持

Vue 3 使用 TypeScript 重写，类型推导更完善，对 TS 项目更友好。

五、迁移建议

新项目 ：直接使用 Vue 3 + Composition API + <script setup>
老项目：可渐进式迁移，Vue 2.7 已支持部分 Composition API
生态：Vue Router 4、Pinia（替代 Vuex）与 Vue 3 配套使用

总结

Vue 3 在响应式、性能、开发体验上全面升级，Composition API 让逻辑复用更自然。对于新项目，建议直接采用 Vue 3；老项目可根据业务优先级制定迁移计划。理解两者差异，有助于在技术选型和升级时做出更合理的决策。

Vue2 与 Vue3 对比：从 Options API 到 Composition API 的演进