Composition API：按“业务逻辑/功能”组织代码（把同一功能相关的状态、计算、监听、生命周期放在一起，且容易抽成 useXxx() 复用）。
1. 代码组织方式
Composition：同一个功能可以“贴在一起”，阅读和维护更顺。
2. 逻辑复用能力
Composition：复用靠函数（useAuth()、useTable()），依赖显式，组合更灵活，几乎是 Vue3 大型项目的主流方式。
3. TypeScript 体验
Composition：变量/函数都是显式声明，TS 推导更自然（配合 <script setup> 更明显）。
案例：做一个 计数器，有 count、double，点按钮 +1，并在 count 变化时打印日志。
<template>
<div>
<p>count: {{ count }}</p>
<p>double: {{ double }}</p>
<button @click="inc">+1</button>
</div>
</template>
<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue'
const count = ref(0)
const double = computed(() => count.value * 2)
function inc() {
count.value++
}
watch(count, (newVal, oldVal) => {
console.log('count changed:', oldVal, '->', newVal)
})
onMounted(() => {
console.log('mounted, count=', count.value)
})
</script>
