vue 3 选项式API和组合式API

[TOC]

<h1>Vue3 组合式API vs 选项式API：全面对比</h1>

Vue3 同时支持**选项式API（Options API）** 和**组合式API（Composition API）**，二者核心目标都是实现 Vue 组件开发，但设计思路、使用场景、代码组织方式有明显区别，也存在底层相通的特性。

下面从**相同点**、**核心不同点**、**适用场景**三个维度清晰对比。

## 相同点（底层一致）

+ **核心功能完全一致**
   都能实现 Vue 组件的所有核心能力：响应式数据、计算属性、侦听器、方法、生命周期、组件通信、指令/过滤器等。

+ **共享 Vue 生态**
   都可以使用 Vue 官方库（Vue Router/Pinia）、第三方 UI 库（Element Plus）、自定义指令等。

+ **可以混合使用**
   Vue3 支持在同一个组件中**同时使用两种 API**（组合式写在 `setup()` 里，选项式写在外层），兼容 Vue2 代码。

+ **编译和运行机制相同**
   底层响应式系统、虚拟 DOM、渲染逻辑完全一致，性能没有本质区别。

## 核心不同点（最关键区别）

### 1. 代码组织方式（最大差异）

+ **选项式 API**：**按选项分类**
  数据放 `data`，方法放 `methods`，计算属性放 `computed`，生命周期按名字写。
  ✅ 优点：结构固定，新手易上手；
  ❌ 缺点：复杂组件代码分散，维护困难。

```HTML

<script>
export default {
  data() { return { count: 0 } }, // 数据
  methods: { add() { this.count++ } }, // 方法
  computed: { double() { return this.count * 2 } }, // 计算属性
  mounted() { console.log('挂载') } // 生命周期
}
</script>
```

+ **组合式 API**：**按业务逻辑分类**
  把**同一个功能**的响应式数据、方法、计算属性写在一起，逻辑高度内聚。
  ✅ 优点：复杂组件易维护、逻辑可复用；
  ❌ 缺点：需要手动管理响应式，新手有学习成本。

```HTML

<script setup>
import { ref, computed, onMounted } from 'vue'
// 计数器功能（所有相关代码放一起）
const count = ref(0)
const add = () => count.value++
const double = computed(() => count.value * 2)
onMounted(() => console.log('挂载'))
</script>
```

### 2. 逻辑复用能力

+ **选项式 API**：只能用 `mixin`/`extend`
  缺点：命名冲突、数据来源不清晰、难以维护。

+ **组合式 API**：支持**自定义组合函数（Composables）**
  可把独立逻辑封装成函数，跨组件复用，无命名冲突，代码清晰。

```javascript
// 封装复用逻辑：useCounter.js
import { ref, computed } from 'vue'
export function useCounter() {
  const count = ref(0)
  const add = () => count.value++
  const double = computed(() => count.value * 2)
  return { count, add, double }
}

// 组件中直接使用
import { useCounter } from './useCounter'
const { count, add } = useCounter()
```

### 3. 响应式数据定义

+ **选项式 API**：自动响应式
  `data` 中定义的数据，Vue 自动包装为响应式，直接用 `this.xx` 访问。

+ **组合式 API**：手动声明响应式
  必须用 `ref`/`reactive` 创建响应式数据，修改变量需要 `.value`（ref）。

### 4. this 指向

+ **选项式 API**：依赖 `this`
  所有数据/方法都通过 `this` 访问，`this` 指向组件实例。

+ **组合式 API**：**无 `this`**
  直接访问变量/函数，避免 `this` 指向混乱（箭头函数/普通函数无差异）。

### 5. 类型支持（TS）

+ **选项式 API**：TS 支持较差
  `this` 类型难推断，复杂组件类型推导繁琐。

+ **组合式 API**：**TS 天然友好**
  基于函数，类型推导完美，是大型项目 + TS 的首选。

### 6. 生命周期使用

+ 选项式：直接写选项名（`mounted(){}`）

+ 组合式：用 `on+生命周期名` 函数（`onMounted(()=>{})`）

## 快速对比表格