Composition API vs Options API

Vue 3 的 Composition API 和传统的 Options API 是两种不同的组件开发方式，各有其设计理念和适用场景。Options API 是 Vue 2 的核心，简单直观，而 Composition API 引入了函数式编程的灵活性。本节将对比两者的语法、使用体验和优缺点，帮助你理解它们的差异，并选择适合项目的开发方式。

Options API 概览

Options API 使用对象字面量定义组件，通过 data、methods、computed 等选项组织逻辑。

示例：计数器组件（Options API）

<template>
  <div>
    <p>计数：{{ count }}</p>
    <button @click="increment">增加</button>
    <p>双倍：{{ double }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  },
  computed: {
    double() {
      return this.count * 2;
    }
  }
};
</script>
  • 特点：
    • 逻辑按功能类型分散（如数据、方法、计算属性）。
    • 通过 this 访问组件实例属性。

Composition API 概览

Composition API 使用 setup 函数集中逻辑，依赖导入的 API（如 ref、computed）实现功能。

示例：计数器组件（Composition API）

<template>
  <div>
    <p>计数：{{ count }}</p>
    <button @click="increment">增加</button>
    <p>双倍：{{ double }}</p>
  </div>
</template>

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

export default {
  setup() {
    const count = ref(0);
    const increment = () => {
      count.value++;
    };
    const double = computed(() => count.value * 2);

    return { count, increment, double };
  }
};
</script>
  • 特点：
    • 逻辑按功能模块集中。
    • 无 this，通过函数返回值暴露给模板。

两者的对比

1. 语法与结构

特性Options APIComposition API
定义方式对象选项（如 data）setup 函数
逻辑组织按类型分散按功能集中
数据访问this.countcount.value 或直接访问
返回值无需显式返回需返回暴露内容
  • Options API：结构固定，按预定义选项组织。
  • Composition API：自由度高，开发者控制逻辑分组。

2. 代码复用

  • Options API：依赖 Mixins 或高阶组件。
    const counterMixin = {
  data() { return { count: 0 }; },
  methods: { increment() { this.count++; } }
};
export default {
  mixins: [counterMixin]
};
    • 问题：命名冲突、来源不明确。
  • Composition API：通过自定义函数复用。
    import { ref } from 'vue';

function useCounter() {
  const count = ref(0);
  const increment = () => count.value++;
  return { count, increment };
}

export default {
  setup() {
    return useCounter();
  }
};
    • 优势：清晰、可组合。

3. 类型支持

  • Options API：需要额外的类型声明。
    import { defineComponent } from 'vue';

export default defineComponent({
  data: () => ({ count: 0 as number }),
  methods: {
    increment() { this.count++; }
  }
});
  • Composition API：天然支持 TypeScript。
    import { ref } from 'vue';

export default {
  setup() {
    const count = ref<number>(0);
    const increment = () => count.value++;
    return { count, increment };
  }
};

4. 学习曲线与复杂度

  • Options API：入门简单，适合小型项目。
  • Composition API：初始学习成本较高，但更适合复杂场景。

5. 性能与灵活性

  • Options API：性能无明显差异，但灵活性受限。
  • Composition API：支持动态逻辑组织，性能一致，但在大型项目中更易优化。

优缺点分析

Options API

  • 优点：
    • 结构直观，适合初学者。
    • 代码模式固定，易于快速上手。
  • 缺点：
    • 逻辑分散，大型组件难以维护。
    • 复用性差，Mixin 有局限。
    • TypeScript 支持较弱。

Composition API

  • 优点：
    • 逻辑集中，可读性强。
    • 复用性高，支持自定义 Hook。
    • TypeScript 友好。
  • 缺点：
    • 需要理解响应式 API（如 ref、reactive）。
    • 初期上手稍复杂。

适用场景

选择 Options API

  • 小型项目：功能简单，组件逻辑少。
  • 快速原型：无需复杂复用或类型支持。
  • 团队过渡：从 Vue 2 迁移，保持熟悉的风格。

选择 Composition API

  • 中大型项目：需要清晰的逻辑组织。
  • 代码复用：频繁提取公共逻辑。
  • 现代开发：配合 TypeScript 或 Vite。

混合使用

Vue 3 支持两种 API 共存：

<template>
  <p>{{ count }} - {{ double }}</p>
  <button @click="increment">增加</button>
</template>

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

export default {
  data() {
    return {
      count: 0 // Options API
    };
  },
  setup() {
    const double = computed(() => this.count * 2); // 访问 this
    const increment = () => {
      this.count++; // Composition API 操作 Options 数据
    };
    return { double, increment };
  }
};
</script>
  • 注意：混合使用时需谨慎管理 this，建议尽量统一风格。

综合示例

实现一个带搜索的列表组件：

Options API 版本

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索..." />
    <ul>
      <li v-for="item in filteredItems" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      items: ['apple', 'banana', 'orange']
    };
  },
  computed: {
    filteredItems() {
      return this.items.filter(item =>
        item.includes(this.searchQuery.toLowerCase())
      );
    }
  }
};
</script>

Composition API 版本

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索..." />
    <ul>
      <li v-for="item in filteredItems" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

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

export default {
  setup() {
    const searchQuery = ref('');
    const items = ref(['apple', 'banana', 'orange']);

    const filteredItems = computed(() =>
      items.value.filter(item =>
        item.includes(searchQuery.value.toLowerCase())
      )
    );

    return { searchQuery, filteredItems };
  }
};
</script>
  • 对比：Composition API 版本逻辑更集中，可轻松提取为 useSearch 函数。

总结

Options API 简单直观，适合小型项目或初学者；而 Composition API 灵活强大，适合复杂项目和现代开发需求。两者各有优势，Vue 3 的设计让你可以根据项目规模和团队经验自由选择。下一节将通过示例展示如何用 Composition API 重构组件，进一步体会其威力！

Last Updated::