Vue 3 深入解析：Composition API vs Options API

Posted on | In

Vue 3 引入了 Composition API，它与 Options API 在代码组织和逻辑复用上有很大不同。本篇文章将深入对比这两种 API，分析它们的优缺点，并通过代码示例展示如何在实际项目中应用它们。

1. 什么是 Options API？

Options API 是 Vue 2 及 Vue 3 仍然支持的一种组件编写方式，它通过 data、methods、computed 和 watch 等选项组织代码。

1.1 Options API 示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
  <div>
    <p>计数器：{{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

1.2 Options API 的优点

  • 代码结构清晰，适合小型组件。
  • 对 Vue 2 用户友好，迁移成本低。
  • 逻辑通过选项（如 data、methods）组织，易于理解。

1.3 Options API 的缺点

  • 逻辑复用不够灵活，通常需要 mixins 或 Vuex。
  • 复杂组件中，逻辑分散在多个选项中，导致代码难以维护。

2. 什么是 Composition API？

Composition API 允许开发者通过 setup 函数和 Vue 的内置 Hooks 来管理组件逻辑。

2.1 Composition API 示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
  <div>
    <p>计数器：{{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

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

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

2.2 Composition API 的优点

  • 逻辑组织更加灵活，可复用性强。
  • 适用于大型应用，逻辑集中在 setup，更易维护。
  • 更好地支持 TypeScript。

2.3 Composition API 的缺点

  • 语法相对复杂，学习成本较高。
  • 需要理解 reactive、ref、computed 等概念。

3. 逻辑复用对比

在 Options API 中，逻辑复用通常依赖 mixins，但 mixins 可能导致变量命名冲突。

3.1 Options API 的 mixins

1
2
3
4
5
6
7
8
9
10
11
12
<script>
export const counterMixin = {
  data() {
    return { count: 0 };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>
1
2
3
4
5
6
<script>
import { counterMixin } from './counterMixin';
export default {
  mixins: [counterMixin]
};
</script>

在 Composition API 中，逻辑复用可以通过 Composable 函数来实现。

3.2 Composition API 的 Composable

1
2
3
4
5
6
7
// useCounter.js
import { ref } from 'vue';
export function useCounter() {
  const count = ref(0);
  const increment = () => count.value++;
  return { count, increment };
}
1
2
3
4
5
6
7
8
<script>
import { useCounter } from './useCounter';
export default {
  setup() {
    return useCounter();
  }
};
</script>

4. 何时使用 Composition API？

  • 需要高度复用逻辑的项目。
  • 组件逻辑较复杂时。
  • 使用 TypeScript 进行类型约束时。

5. 结论

Options API 适用于小型项目，而 Composition API 适用于大型项目。Vue 3 提供了更多的灵活性，使开发者可以根据需求选择最佳方式进行开发。