Vue2与Vue3之间API差异

一、核心内容梳理（API 对比 / 选型建议）

设计理念差异

维度	Options API	Composition API
设计核心	以 "选项" 为核心，按功能（data/methods/computed 等）划分代码	以 "逻辑" 为核心，按业务逻辑维度聚合代码
编程范式	面向对象（OOP）风格，依赖 Vue 实例上下文	函数式编程（FP）风格，通过组合函数复用逻辑
心智模型	固定选项结构，新手易上手	自由组合逻辑，适配复杂场景

核心差异（代码示例对比）
Options API 实现 "用户信息 + 列表筛选" 逻辑

vue 复制代码

<template>
  <div>
    <p>用户名：{{ username }}</p>
    <button @click="updateName">修改名称</button>
    <ul>
      <li v-for="item in filteredList" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  // 状态分散在data
  data() {
    return {
      username: "张三",
      list: [{ id: 1, name: "Vue" }, { id: 2, name: "React" }, { id: 3, name: "Angular" }],
      filterKey: "Vue"
    };
  },
  // 计算属性单独维护
  computed: {
    filteredList() {
      return this.list.filter(item => item.name.includes(this.filterKey));
    }
  },
  // 方法分散在methods
  methods: {
    updateName() {
      this.username = "李四";
    },
    changeFilter(key) {
      this.filterKey = key;
    }
  },
  // 生命周期单独配置
  mounted() {
    console.log("组件挂载：", this.username);
  }
};
</script>

Composition API 实现相同逻辑

vue 复制代码

<template>
  <div>
    <p>用户名：{{ username }}</p>
    <button @click="updateName">修改名称</button>
    <ul>
      <li v-for="item in filteredList" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

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

// 用户信息逻辑 聚合
const username = ref("张三");
const updateName = () => {
  username.value = "李四";
};

// 列表筛选逻辑 聚合
const list = ref([{ id: 1, name: "Vue" }, { id: 2, name: "React" }, { id: 3, name: "Angular" }]);
const filterKey = ref("Vue");
const filteredList = computed(() => {
  return list.value.filter(item => item.name.includes(filterKey.value));
});

// 生命周期
onMounted(() => {
  console.log("组件挂载：", username.value);
});
</script>

适用场景

API 类型	适用场景	不适用场景
Options API	1. 小型组件 / 简单业务场景 2. 新手入门学习 3. 快速原型开发	1. 大型复杂组件 2. 逻辑复用频繁的场景
Composition API	1. 中大型项目 / 复杂组件 2. 逻辑复用（抽离组合函数）3. 团队协作开发	1. 超简单的一次性组件 2. 追求极致开发速度的小需求

Composition API 核心优势

逻辑聚合：相同业务逻辑的代码集中在一起，解决 Options API "逻辑碎片化" 问题（比如一个 "用户登录" 逻辑，不用分散在 data/methods/watch 等多个选项中）；
逻辑复用：可通过自定义组合函数复用逻辑（比如 useUser()、useListFilter()），比 Options API 的 mixins 更清晰（无命名冲突、可明确看到依赖）；
类型友好：与 TypeScript 结合更自然，类型推导更完善，适合大型 TS 项目；
灵活性高：可按需导入 API（如 ref、computed），代码更轻量化，且支持条件式逻辑组合。

对比

markdown 复制代码

# Vue Options API vs Composition API 深度对比

## 一、设计理念
Options API 以"选项"为核心，将组件逻辑按 data、methods、computed 等预设选项划分，符合新手的"分类式"思维；Composition API 以"逻辑"为核心，允许开发者按业务维度聚合代码，适配复杂场景的"模块化"思维。

## 二、核心差异
### 1. 代码组织
- Options API：逻辑分散，相同业务的代码被拆分到不同选项中，组件越大越难维护；
- Composition API：逻辑聚合，一个业务逻辑的状态、方法、计算属性可集中编写，可读性更高。

### 2. 逻辑复用
- Options API：依赖 mixins/extends，但存在命名冲突、来源不清晰的问题；
- Composition API：通过组合函数复用，显式导入/导出，可追溯、无冲突。

### 3. 类型支持
- Options API：与 TypeScript 结合需额外配置（如 defineComponent），类型推导不完整；
- Composition API：天然适配 TS，ref/reactive 等 API 可直接推导类型，开发体验更好。

## 三、适用场景
| API 类型       | 适用场景                                  | 核心优势                          |
|----------------|-------------------------------------------|-----------------------------------|
| Options API    | 小型组件、新手开发、快速原型              | 上手快、结构固定、学习成本低      |
| Composition API | 中大型项目、复杂组件、逻辑复用频繁的场景  | 逻辑聚合、复用性强、类型友好      |

## 四、选型建议
1. 新手入门/小型项目：优先 Options API，降低学习和开发成本；
2. 中大型项目/团队协作：优先 Composition API + `<script setup>`，提升代码可维护性和复用性；
3. 混合使用：基础通用组件（如 UI 组件）用 Options API，业务组件用 Composition API。

## 五、总结
两种 API 并非替代关系，而是互补关系。Vue 3 保留 Options API 是为了兼容存量代码和降低新手门槛，而 Composition API 是未来的主流方向，尤其在大型项目和 TS 开发中优势显著。