Vue3 Composition API 实战

Composition API 是 Vue3 最重要的变革，解决了 Options API 在复杂组件中的逻辑组织和复用问题。

响应式基础

<script setup>
import { ref, computed } from "vue"

const count = ref(0)
const double = computed(() => count.value * 2)

function increment() {
  count.value++
}
</script>

逻辑复用（Composables）

将可复用逻辑抽成独立函数：

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

在任意组件中调用，逻辑清晰、无命名冲突。

为什么选它

• 按功能组织代码，而非按选项
• 逻辑复用无 this 困扰
• 对 TypeScript 支持更友好

Composition API 让 Vue3 在大型项目中的可维护性大幅提升。