一、Composition API基础

1.1 为什么需要Composition API

┌─────────────────────────────────────────────────┐
│              Composition API                    │
├─────────────────────────────────────────────────┤
│  setup() {                                     │
│    const { ref, computed, watch } = Vue        │
│    // 相关逻辑聚合在一起                         │
│  }                                             │
├─────────────────────────────────────────────────┤
│  优势：逻辑聚合、代码复用、更好的TypeScript支持  │
└─────────────────────────────────────────────────┘

1.2 setup组件选项

 count.value * 2)

function increment() {
  count.value++
}

onMounted(() => {
  console.log('Component mounted')
})" _ue_custom_node_="true">

二、响应式系统

2.1 ref与reactive

三、计算属性与监听

3.1 computed

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

3.2 watch与watchEffect

watch(userId, async (newId, oldId) => {
  userData.value = await fetchUser(newId)
}, { immediate: true })

watchEffect(async () => {
  userData.value = await search(userId.value, searchKeyword.value)
})