Vue 3：组合式 API、setup、生命周期与 Composables
一、何为组合式 API
- Options API：按
data、methods等选项切分，逻辑易随规模碎片化。 - Composition API：以
setup（或<script setup>）为中心，把同一功能的 state/effect/生命周期写在一起，便于阅读与抽离。
相对 Options 的优势
- 逻辑聚合；Composable 替代 mixin；TS 友好；无 mixin 暗冲突。
二、setup 与 <script setup>
setup 选项
- 入参：props、context（
attrs、slots、emit等）。 - 返回值：暴露给模板的对象（或使用渲染函数则另论）。
<script setup>（编译期语法糖）
- 无需
return：顶层绑定自动暴露模板。 - 组件：import 即用。
- props/emits：
defineProps/defineEmits宏。 - 性能：编译器可做更多静态分析。
三、生命周期映射
Options → Composition
| Vue 2（选项） | Vue 3（组合式） |
|---|---|
| beforeCreate / created | setup：在选项式中与官方生命周期顺序一致，为 beforeCreate 之后、created 之前；纯 <script setup> 下通常不再单独写这两项，同步初始化写在 setup 顶层即可 |
| beforeMount | onBeforeMount |
| mounted | onMounted |
| beforeUpdate | onBeforeUpdate |
| updated | onUpdated |
| beforeDestroy | onBeforeUnmount |
| destroyed | onUnmounted |
| activated / deactivated | onActivated / onDeactivated |
调试钩子
- onRenderTracked
- onRenderTriggered
仅开发期排查渲染依赖时使用。
执行顺序
父子生命周期仍呈「父先进入、子先挂载完毕再父 mounted」等洋葱规律；写法换成函数钩子，语义不变。
四、自定义 Hook / Composable
约定
- 函数名
useXxx。 - 返回模板所需响应式状态与方法。
- 内部可用任意组合式 API 与生命周期。
示例
useCounter：计数加减复位。useUserList：挂载请求列表、暴露刷新与行操作。
工程实践
页面尽量薄：逻辑进 use*，组件专注视图组合。
五、小结
- 入口：
setup/<script setup>。 - 生命周期：
onMounted等函数需从vue引入。 - 复用：Composable 替代 mixin。
下一章：侦听器与内置能力。