vue的选项式API和组合式API

我们来深入比较一下 Vue 2 的选项式 API（Options API） 和 Vue 3 引入的组合式 API（Composition API） 。

这是一张清晰的对比表格，概括了核心差异：

特性	选项式 API (Options API)	组合式 API (Composition API)
代码组织方式	按选项类型组织（data, methods, computed, 生命周期）	按逻辑功能组织（所有相关代码放在一起）
核心概念	`this` 上下文	响应式 API (`ref`, `reactive`) 和生命周期钩子
复用能力	混入 (Mixins) ，容易发生命名冲突和来源不清晰	组合式函数 (Composables) ，清晰的数据来源和命名空间
TypeScript 支持	支持一般，`this` 的类型推断较复杂	原生支持极好，类型推断简单明了
学习曲线	较低，结构固定，对初学者更友好	较高，需要理解响应式系统和作用域概念
灵活性	较低，受限于固定的选项结构	极高，可以像编写普通 JavaScript 一样组织代码
默认推荐	Vue 2 的默认方式，Vue 3 中仍完全支持	Vue 3 的官方推荐和新项目首选

1. 代码组织方式：最根本的区别

这是两者最核心的差异，决定了你编写代码的思维方式。

选项式 API：按"选项"分类

代码被分散到不同的选项区域：data、methods、computed、watch、生命周期钩子等。
同一个逻辑功能的代码被拆分到了不同的地方。

vue 复制代码

<!-- 选项式 API 示例：实现一个鼠标跟踪器 -->
<script>
export default {
  // 数据定义在这里
  data() {
    return {
      x: 0,
      y: 0
    }
  },
  // 方法定义在这里
  methods: {
    updatePosition(event) {
      this.x = event.pageX
      this.y = event.pageY
    }
  },
  // 生命周期钩子：组件挂载时添加监听
  mounted() {
    window.addEventListener('mousemove', this.updatePosition)
  },
  // 生命周期钩子：组件销毁时移除监听
  beforeUnmount() {
    window.removeEventListener('mousemove', this.updatePosition)
  }
}
</script>

优点：结构清晰固定，对于简单的组件，很容易阅读和理解。你知道数据在哪，方法在哪。
缺点：对于复杂的组件，同一个逻辑关注点的代码被割裂到了不同的地方。阅读和维护时需要上下反复跳转，这被称为"碎片化"。

组合式 API：按"逻辑功能"组织

使用 setup() 函数（或 <script setup>），你可以将同一个逻辑功能相关的数据、方法、计算属性、监听器、生命周期钩子全部写在一起。

vue 复制代码

<!-- 组合式 API 示例：实现同一个鼠标跟踪器 -->
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'

// 逻辑功能 A: 鼠标跟踪
const x = ref(0)
const y = ref(0)

const updatePosition = (event) => {
  x.value = event.pageX
  y.value = event.pageY
}

onMounted(() => window.addEventListener('mousemove', updatePosition))
onBeforeUnmount(() => window.removeEventListener('mousemove', updatePosition))

// 逻辑功能 B: 另一个功能也可以写在这里，互不干扰
// const anotherFeature = () => { ... }
</script>

优点：极致的代码组织能力。你可以将组件拆分为多个基于逻辑功能的函数单元，每个单元自成一体，易于移植和测试。阅读复杂组件时，可以按功能块依次阅读，无需跳转。
缺点：需要更好地理解 Vue 的响应式系统，对初学者门槛稍高。

2. 逻辑复用能力

选项式 API：使用 Mixins

javascript 复制代码

// mouseMixin.js
export default {
  data() {
    return {
      x: 0,
      y: 0
    }
  },
  methods: {
    updatePosition(event) { ... }
  },
  mounted() { ... },
  beforeUnmount() { ... }
}

vue 复制代码

<script>
import mouseMixin from './mouseMixin.js'
export default {
  mixins: [mouseMixin] // 混入
  // ... 其他组件选项
}
</script>

缺点：
- 命名冲突：多个 Mixin 可能暴露相同的属性名，导致覆盖。
- 来源不清晰：使用一个属性时，很难一眼看出它来自哪个 Mixin。
- 可重用性有限：无法向 Mixin 传递参数来定制它的行为。

组合式 API：使用组合式函数 (Composables)

javascript 复制代码

// useMouse.js
import { ref, onMounted, onBeforeUnmount } from 'vue'

export function useMouse() {
  const x = ref(0)
  const y = ref(0)

  const updatePosition = (event) => { ... }

  onMounted(() => window.addEventListener('mousemove', updatePosition))
  onBeforeUnmount(() => window.removeEventListener('mousemove', updatePosition))

  // 返回响应式数据，供组件使用
  return { x, y }
}

vue 复制代码

<script setup>
import { useMouse } from './useMouse.js'

// 可以清晰地命名，并且知道数据来自 useMouse
const { x, y } = useMouse()

// 可以轻松使用多个组合式函数
// const { user } = useUser()
// const { data } = useFetch()
</script>

优点：
- 清晰的来源：通过解构赋值，可以清楚地知道每个属性来自哪个函数。
- 无命名冲突：可以通过变量重命名解决。
- 可传参：组合式函数可以接受参数，灵活性极高。
- 基于响应式系统：本身就是利用 Vue 的响应式 API 构建的，无缝集成。

3. TypeScript 支持

选项式 API ：与 TS 集成需要一些技巧，尤其是在为 this 上的属性添加类型时，需要使用一些特定的类型工具（如 defineComponent）。
组合式 API：天生对 TS 友好。它主要是普通的变量和函数，可以享受完整的类型推断，不需要复杂的类型定义。这是许多大型项目选择组合式 API 的关键原因。

4. 学习曲线与适用场景

方面	选项式 API	组合式 API
学习者	前端新手、从 Vue 2 迁移的开发者	有 Vue 或 React Hooks 经验的开发者、构建复杂应用
项目类型	简单到中等复杂度的应用、快速原型开发	大型、复杂的应用，需要高度可维护性和代码复用
团队协作	结构固定，容易统一风格	更灵活，但也更需要约定规范来保证代码风格一致

总结与建议

并非替代关系 ：组合式 API 是补充，而非取代选项式 API。选项式 API 在 Vue 3 中依然完全有效且稳定。
兼容并存 ：你甚至可以在同一个组件中同时使用两者（在 setup() 中定义组合式 API，在其他选项中定义选项式 API），但不推荐新手这样做。
如何选择？
- 新手入门/简单项目 ：从选项式 API 开始学习，概念更直观，更容易上手。
- 大型复杂应用/需要逻辑复用 ：毫不犹豫地选择组合式 API。它的长期维护性和可扩展性优势巨大。
- 新项目 ：官方推荐使用组合式 API + <script setup> 语法，这是未来的方向。

核心思想 ：组合式 API 通过提供更底层的响应式系统访问和更灵活的代码组织方式，解决了选项式 API 在复杂组件中逻辑关注点分离 和逻辑复用上的痛点。