Vue 3 Composition API 与 Options API 的区别是什么？

Options API（Vue 2 经典）：

export default {
  data() { return { count: 0 }; },
  computed: { doubleCount() { return this.count * 2; } },
  watch: { count(val) { console.log(val); } },
  methods: { increment() { this.count++; } },
  mounted() { console.log('mounted'); }
};

问题：

• 逻辑分散在各选项中（data/methods/watch/computed 分散各处）
• 复杂的组件难以阅读和维护
• Mixin 容易命名冲突和数据来源不清晰

Composition API（Vue 3）：

import { ref, computed, watch, onMounted } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const doubleCount = computed(() => count.value * 2);
    
    watch(count, (val) => console.log(val));
    
    const increment = () => count.value++;
    
    onMounted(() => console.log('mounted'));
    
    return { count, doubleCount, increment };
  }
};

优势：

特性	Options API	Composition API
逻辑组织	按选项类型（data/methods）	按功能（一个功能的所有逻辑在一起）
代码复用	Mixin（隐患多）	Composables（清晰）
类型推断	较差（this 上下文复杂）	优秀（普通变量+类型推导）
逻辑抽取	困难	可抽离为独立函数
大型组件	难以维护	逻辑清晰可分组

Composables（组合函数）：

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

// 使用
const { count, increment } = useCounter();

建议：小项目/简单组件可用 Options API；中大型项目推荐 Composition API。