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

最新推荐文章于 2025-08-19 19:47:16 发布

原创最新推荐文章于 2025-08-19 19:47:16 发布 · 1.7k 阅读

27 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

前端学习专栏收录该内容

28 篇文章

订阅专栏

一、前言：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

API	用途	选项式 API 对应物
`ref`	创建基本类型的响应式数据	`data` 中的基本类型
`reactive`	创建对象的响应式代理	`data` 中的对象
`computed`	创建计算属性	`computed` 选项
`watch`	监听响应式数据变化	`watch` 选项
`watchEffect`	自动追踪依赖的响应式效果	-

4. 生命周期钩子对照

选项式 API	组合式 API
`beforeCreate`	不需要（直接写在 setup 中）
`created`	不需要（直接写在 setup 中）
`beforeMount`	`onBeforeMount`
`mounted`	`onMounted`
`beforeUpdate`	`onBeforeUpdate`
`updated`	`onUpdated`
`beforeUnmount`	`onBeforeUnmount`
`unmounted`	`onUnmounted`

四、两种 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. 对应关系记忆卡

选项式 API	组合式 API
`this`	不需要，直接访问变量
`data()`	`ref()` 或 `reactive()`
`methods`	普通函数
`computed`	`computed()`
`watch`	`watch()` 或 `watchEffect()`
生命周期钩子	`onXxx()` 系列函数
`props`	`defineProps()`
`emits`	`defineEmits()`
`mixins`	组合函数