Vue 组合式 API 与 选项式 API 全面对比教程

一、前言：Vue 的两种 API 风格

Vue 提供了两种编写组件逻辑的方式：组合式 API (Composition API) 和 选项式 API (Options API)。理解这两种方式的区别和适用场景，对于 Vue 开发者至关重要。

为什么会有两种 API？

• 选项式 API：Vue 2 的传统方式，按照选项（data、methods 等）组织代码
• 组合式 API：Vue 3 引入的新方式，基于函数组合逻辑，更适合复杂组件

二、选项式 API (Options API) 详解

1. 基本结构

<script>
export default {
  // 数据选项
  data() {
    return {
      count: 0,
      message: 'Hello Vue!'
    }
  },
  
  // 计算属性
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('')
    }
  },
  
  // 方法
  methods: {
    increment() {
      this.count++
    }
  },
  
  // 生命周期钩子
  mounted() {
    console.log('组件已挂载')
  }
}
</script>

<template>
  <div>
    <p>{{ message }}</p>
    <p>反转: {{ reversedMessage }}</p>
    <button @click="increment">计数: {{ count }}</button>
  </div>
</template>

2. 选项式 API 的特点

• 按选项组织代码：将代码分为 data、methods、computed 等固定选项
• this 上下文：通过 this 访问组件实例
• 隐式响应式：data 返回的对象自动成为响应式
• 适合简单组件：逻辑较少时结构清晰

3. 生命周期钩子

export default {
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  beforeUnmount() {},
  unmounted() {}
}

三、组合式 API (Composition API) 详解

1. 基本结构（<script setup> 语法）

<script setup>
import { ref, computed, onMounted } from 'vue'

// 响应式状态
const count = ref(0)
const message = ref('Hello Vue!')

// 计算属性
const reversedMessage = computed(() => {
  return message.value.split('').reverse().join('')
})

// 方法
function increment() {
  count.value++
}

// 生命周期钩子
onMounted(() => {
  console.log('组件已挂载')
})
</script>

<template>
  <div>
    <p>{{ message }}</p>
    <p>反转: {{ reversedMessage }}</p>
    <button @click="increment">计数: {{ count }}</button>
  </div>
</template>

2. 组合式 API 的特点

• 基于函数：通过导入函数实现各种功能
• 逻辑组合：可以自由组织相关代码
• 显式响应式：需要明确使用 ref/reactive
• 更好的 TypeScript 支持：类型推断更自然
• 逻辑复用：可以提取和重用逻辑（组合函数）

3. 核心响应式 API

4. 生命周期钩子对照

四、两种 API 的深度对比

1. 代码组织方式

选项式 API：

export default {
  data() { /*...*/ },    // 数据
  computed: { /*...*/ }, // 计算属性
  methods: { /*...*/ },  // 方法
  watch: { /*...*/ }     // 监听器
}

组合式 API：

// 功能A相关代码
const { x, y } = useFeatureA()

// 功能B相关代码
const { a, b } = useFeatureB()

2. 逻辑复用对比

选项式 API 复用（mixins）：

// mixin.js
export default {
  data() {
    return {
      mixinData: 'Mixin Data'
    }
  },
  methods: {
    mixinMethod() { /*...*/ }
  }
}

// 组件中使用
import myMixin from './mixin.js'
export default {
  mixins: [myMixin]
}

组合式 API 复用（组合函数）：

// useFeature.js
export function useFeature() {
  const state = ref(null)
  function doSomething() { /*...*/ }
  return { state, doSomething }
}

// 组件中使用
import { useFeature } from './useFeature.js'
const { state, doSomething } = useFeature()

3. 类型支持对比

• 选项式 API：类型推断有限，特别是在使用 mixins 时
• 组合式 API：天然支持 TypeScript，类型推断更准确

五、何时使用哪种 API？

选项式 API 适合：

• 小型到中型项目
• 简单组件开发
• 熟悉 Vue 2 的开发者
• 需要快速原型开发时

组合式 API 适合：

• 大型复杂项目
• 需要更好逻辑组织的组件
• 需要逻辑复用的场景
• TypeScript 项目
• 团队希望统一代码风格

六、组合式 API 进阶技巧

1. 自定义组合函数示例

// useCounter.js
import { ref } from 'vue'

export function useCounter(initialValue = 0) {
  const count = ref(initialValue)
  
  function increment() {
    count.value++
  }
  
  function decrement() {
    count.value--
  }
  
  function reset() {
    count.value = initialValue
  }
  
  return {
    count,
    increment,
    decrement,
    reset
  }
}

组件中使用：

<script setup>
import { useCounter } from './useCounter'

const { count, increment } = useCounter(10)
</script>

<template>
  <button @click="increment">Count: {{ count }}</button>
</template>

2. 异步状态管理

<script setup>
import { ref } from 'vue'

const data = ref(null)
const loading = ref(false)
const error = ref(null)

async function fetchData() {
  loading.value = true
  error.value = null
  try {
    const response = await fetch('/api/data')
    data.value = await response.json()
  } catch (err) {
    error.value = err
  } finally {
    loading.value = false
  }
}

// 立即获取数据
fetchData()
</script>

3. 组件通信

<!-- Parent.vue -->
<script setup>
import { ref } from 'vue'
import Child from './Child.vue'

const msg = ref('Hello from parent')
</script>

<template>
  <Child v-model="msg" />
</template>

<!-- Child.vue -->
<script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script>

<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

七、迁移策略：从选项式到组合式

1. 渐进式迁移

• 新组件使用组合式 API
• 旧组件逐步重构
• 混合使用（在选项式组件中使用 setup 选项）

2. 对应关系记忆卡

八、常见问题解答

1. 两种 API 可以混用吗？

可以，但不推荐。在 Vue 3 中，你可以在组件中使用 setup() 选项来使用组合式 API，同时保留其他选项。

2. 组合式 API 更难学吗？

对于 Vue 新手，选项式 API 可能更容易上手。但有其他框架经验的开发者，组合式 API 可能更直观。

3. 性能有差异吗？

两种 API 在性能上没有显著差异，组合式 API 在某些场景下可能有轻微优势。

4. 公司项目该用哪种？

新项目推荐组合式 API，旧项目可以逐步迁移。团队统一风格最重要。

九、总结

Vue 的两种 API 风格各有优势：

• 选项式 API：结构清晰，学习曲线平缓，适合简单场景
• 组合式 API：灵活强大，便于逻辑复用和组织，适合复杂场景

建议开发者：

1. 先掌握选项式 API 理解 Vue 核心概念
2. 逐渐过渡到组合式 API
3. 根据项目需求和个人偏好选择合适的方式
4. 大型项目推荐统一使用组合式 API

组合式 API 代表了 Vue 的未来发展方向，特别是对于复杂应用和需要良好 TypeScript 支持的项目。选项式 API 仍会长期支持，适合维护旧项目和简单场景。

创作不易，如果您都看到这里了，可以给我一个点赞、收藏并关注一下么？您的支持与喜爱是激励我创作的最大动力！

如果内容有误请及时联系我进行修改！