Vue 3 组合式 API 深入理解

从 Options API 转向 Composition API 是 Vue 3 最大的范式转变。很多人觉得这只是换了种写法，但深入理解后会发现，它从根本上改变了代码组织方式。

为什么需要组合式 API？

Options API 的问题：同一个逻辑关注点的代码被分散在 data、computed、methods、watch 中。当组件变大时，理解一个功能需要上下翻找。

组合式 API 的优势：按逻辑关注点组织代码，而非按选项类型。

核心响应式 API

ref vs reactive

import { ref, reactive } from 'vue'

// ref: 包装基本类型和对象
const count = ref(0)
count.value++ // 需要 .value

// reactive: 仅用于对象
const state = reactive({ name: '喵内', age: 20 })
state.name = '新名字' // 直接访问

选择原则： 优先用 ref，它更通用、更可预测。reactive 在解构时会丢失响应性。

computed

const fullName = computed(() => `${firstName.value} ${lastName.value}`)

watchEffect vs watch

// watchEffect: 自动收集依赖
watchEffect(() => {
  console.log(count.value) // 自动追踪
})

// watch: 精确指定依赖
watch(count, (newVal, oldVal) => {
  console.log(`${oldVal} -> ${newVal}`)
})

自定义 Hook（Composable）

这是组合式 API 最强大的地方——逻辑复用：

// useMousePosition.ts
export function useMousePosition() {
  const x = ref(0)
  const y = ref(0)

  onMounted(() => {
    window.addEventListener('mousemove', (e) => {
      x.value = e.clientX
      y.value = e.clientY
    })
  })

  return { x, y }
}

// 在任何组件中使用
const { x, y } = useMousePosition()

小结

组合式 API 的本质是将 Vue 组件从"填表式开发"变成"函数式组合"。刚开始可能觉得不习惯，但用过之后会发现代码更清晰、复用更方便。