Vue 3的Composition API和Options API有什么区别？

Vue 3引入了Composition API作为Options API的一种补充和增强。它们代表了两种组织组件逻辑的不同范式，并非互斥，你可以根据场景选择甚至混用。理解它们的区别，有助于你写出更清晰、更易维护的Vue代码。

组织逻辑的方式

Options API通过一系列固定的选项（如data、methods、computed、watch、生命周期钩子）来组织代码。这种结构清晰，特别适合中小型组件或初学者，因为它强制将不同类型代码分门别类。

<script>
export default {
  data() {
    return { count: 0, message: 'Hello' }
  },
  methods: {
    increment() { this.count++ }
  },
  computed: {
    reversedMessage() { return this.message.split('').reverse().join('') }
  }
}
</script>

但是，当一个组件的功能变复杂时，与同一功能相关的代码（例如一个“用户管理”功能的数据、计算属性和方法）会被分散到多个选项中，导致理解和维护成本增加。

Composition API则允许你使用导入的函数（如ref、computed、onMounted）来更灵活地组织和复用代码。逻辑可以围绕功能（或“关注点”）来组织，而不是围绕选项类型。

<script setup>
import { ref, computed, onMounted } from 'vue';
// 计数器功能
const count = ref(0);
const increment = () => { count.value++ };
// 消息处理功能
const message = ref('Hello');
const reversedMessage = computed(() => message.value.split('').reverse().join(''));
onMounted(() => { console.log('组件挂载') });
</script>

与同一功能相关的所有代码（状态、计算、方法、副作用）可以集中在一起，这使得大型组件的逻辑脉络更清晰，也更容易将逻辑提取为可复用的组合式函数。

逻辑复用的能力

这是Composition API最大的优势。在Options API中，逻辑复用主要通过mixins、高阶组件或作用域插槽实现，但这些模式都可能带来命名冲突、来源不清晰等问题。

Composition API允许你将组件逻辑提取到独立的组合式函数中，这些函数可以像普通函数一样被导入和使用。

// 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 './useCounter';
const { count, increment } = useCounter(10);
</script>

这种方式提供了清晰的来源和灵活的参数传递，使得跨组件的逻辑共享变得简单而强大。

TypeScript支持与灵活性

Composition API对TypeScript的支持更加友好，因为它主要使用普通的变量和函数，类型推断更直接。<script setup>语法配合TypeScript能提供近乎完美的开发体验。

Composition API也提供了更灵活的响应式能力（如独立的ref、reactive、watch函数），不受组件实例上下文的约束。

总而言之，Options API提供了结构化的便利，适合简单场景或偏好这种风格。Composition API则提供了更好的逻辑组织、复用和TypeScript支持，是构建复杂、大型Vue应用的首选。对于新项目，建议从Composition API开始；对于现有Options API项目，可以渐进式地采用。