当前位置：首页 > news >正文

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

news 来源：原创 2025/6/16 6:18:48

一、前言：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 = trueerror.value = nulltry {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`	组合函数