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 组件从"填表式开发"变成"函数式组合"。刚开始可能觉得不习惯,但用过之后会发现代码更清晰、复用更方便。