Vue 3 Composition API 完全指南

Vue 3 引入的 Composition API 为我们提供了更灵活的代码组织方式。

响应式基础

ref vs reactive

typescript
import { ref, reactive } from 'vue'

// ref 用于基本类型
const count = ref(0)
console.log(count.value) // 访问需要 .value

// reactive 用于对象
const state = reactive({
  name: 'Vue',
  version: 3
})
console.log(state.name) // 直接访问

生命周期钩子

typescript
import { onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('组件已挂载')
    })
    
    onUnmounted(() => {
      console.log('组件将卸载')
    })
  }
}

computed 和 watch

typescript
import { ref, computed, watch } from 'vue'

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

watch(count, (newVal, oldVal) => {
  console.log(`count 从 ${oldVal} 变为 ${newVal}`)
})

组合函数（Composables）

typescript
// useCounter.ts
import { ref } from 'vue'

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

总结

Composition API 让代码更加模块化和可复用，是 Vue 3 的一大亮点。