Vue 3组合式API深度解析

为什么需要Composition API

• 更好的逻辑复用
• 更灵活的代码组织
• 更友好的TypeScript支持

核心API

ref与reactive

import { ref, reactive } from 'vue'

const count = ref(0)
const state = reactive({ name: 'Vue' })

computed

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

watch

watch(count, (newVal, oldVal) => {
  console.log('changed')
})

生命周期

onMounted(() => {})
onUpdated(() => {})
onUnmounted(() => {})

自定义Hook

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

最佳实践

1. 逻辑相关的代码放一起
2. 提取可复用的composables
3. 合理使用watchEffect