Composition API 和 Options API

了解 Vue 中 Composition API 和 Options API 这两种核心编程范式的区别，这是掌握 Vue3 开发的关键------前者是 Vue3 主推的新范式，后者是 Vue2 的传统写法，核心差异体现在代码组织方式、逻辑复用、类型支持等方面。

一、核心定位与设计理念

特性	Options API（选项式 API）	Composition API（组合式 API）
设计理念	基于"选项划分"组织代码，按 `data`/`methods`/`computed` 等选项归类	基于"逻辑功能"组织代码，按业务逻辑拆分组合，更灵活
适配版本	Vue2 核心，Vue3 兼容但非最优	Vue3 主推，Vue2 需安装 `@vue/composition-api` 适配
核心关键词	选项、配置、隔离	组合、函数、复用

二、代码写法直观对比

1. 基础示例（实现"计数器"功能）

Options API 写法

vue 复制代码

<template>
  <div>{{ count }} <button @click="increment">+1</button></div>
</template>

<script>
export default {
  // 状态：分散在不同选项中
  data() {
    return { count: 0 };
  },
  // 计算属性
  computed: {
    doubleCount() {
      return this.count * 2;
    }
  },
  // 方法
  methods: {
    increment() {
      this.count++;
    }
  },
  // 生命周期
  mounted() {
    console.log("计数器初始化完成");
  }
};
</script>

Composition API 写法（`<script setup>` 语法糖）

vue 复制代码

<template>
  <div>{{ count }} <button @click="increment">+1</button></div>
</template>

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

// 1. 状态定义（响应式）
const count = ref(0);

// 2. 计算属性
const doubleCount = computed(() => count.value * 2);

// 3. 方法
const increment = () => {
  count.value++;
};

// 4. 生命周期
onMounted(() => {
  console.log("计数器初始化完成");
});
</script>

2. 核心差异解读

代码组织 ：
- Options API：同一逻辑的代码（如计数器的状态、方法、计算属性）被拆分到 data/methods/computed 等不同选项中，代码量越大，逻辑越分散（"碎片化"）；
- Composition API：同一逻辑的代码集中在一起，比如计数器的所有相关代码都在一个代码块里，便于阅读和维护。
响应式语法 ：
- Options API：通过 this 访问所有状态/方法，this 指向组件实例，容易出现上下文混淆；
- Composition API：通过 ref/reactive 定义响应式数据，直接通过变量名访问，无 this 依赖，更贴合原生 JS 写法。

三、核心特性深度对比

1. 逻辑复用

这是两者最核心的差异之一，Composition API 彻底解决了 Options API 逻辑复用的痛点。

Options API 的逻辑复用：依赖 Mixin/extends

缺点：命名冲突、来源不清晰、逻辑嵌套混乱；

示例（Mixin 复用计数器逻辑）：

javascript 复制代码

// mixins/counter.js
export default {
  data() {
    return { count: 0 };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};

// 组件中使用
export default {
  mixins: [counterMixin], // 引入Mixin
  mounted() {
    // 无法直观区分 count/increment 来自组件还是 Mixin
    console.log(this.count);
  }
};

Composition API 的逻辑复用：自定义组合函数（Composables）

优点：逻辑封装成独立函数，命名可控、来源清晰、无冲突；

示例（封装计数器逻辑为组合函数）：

javascript 复制代码

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

export function useCounter(initialValue = 0) {
  const count = ref(initialValue);
  const increment = () => count.value++;
  return { count, increment }; // 暴露需要的状态/方法
}

// 组件中使用
<script setup>
import { useCounter } from '@/composables/useCounter';
// 按需引入，命名清晰
const { count, increment } = useCounter(0);
</script>

2. TypeScript 支持

Options API ：对 TS 支持差，this 类型推导复杂，需大量手动类型声明；

typescript 复制代码

// Options API + TS（繁琐）
import { defineComponent } from 'vue';

export default defineComponent({
  data() {
    return { count: 0 }; // 需手动声明 count 类型
  },
  methods: {
    increment(num: number) {
      this.count += num; // this 类型易出错
    }
  }
});

Composition API ：天生适配 TS，类型推导自动完成，无需额外配置，写法和原生 TS 一致；