Vue 3 Composition API 实战笔记

为什么选择 Composition API？ ​

Options API 在组件逻辑复杂时，相同功能的代码散落在 data、methods、computed 中，维护成本高。

Composition API 的核心优势：

1. 逻辑复用 - 告别 mixin 的命名冲突问题
2. 更好的 TypeScript 支持 - 类型推断更自然
3. 代码组织更灵活 - 按功能组织而不是按选项类型

自定义 Hooks ​

将可复用的逻辑提取到函数中：

// useCounter.ts
export function useCounter(initialValue = 0) {
  const count = ref(initialValue)
  const increment = () => count.value++
  const decrement = () => count.value--
  
  return { count, increment, decrement }
}

总结 ​

Composition API 让 Vue 的代码组织更加灵活，推荐在新项目中全面使用。