Composition API 中生命周期钩子需显式导入（如onMounted），只能在setup顶层或其同步调用的组合函数中使用，用于封装可复用逻辑，不可在异步回调中调用。
在 setup 中无法直接使用 Options API 风格的生命周期钩子（如 mounted、beforeUnmount），必须通过 导入对应的组合式 API 钩子函数 来实现。这是 Composition API 的设计原则：逻辑按功能组织，而非按选项分组。
必须显式导入生命周期钩子
Composition API 中所有生命周期钩子都是独立的函数，需从 vue 显式导入，不能靠上下文自动注入：
-
onMounted、onUpdated、onUnmounted替代mounted、updated、beforeUnmount -
onBeforeMount、onBeforeUpdate、onBeforeUnmount对应前置阶段 -
onActivated、onDeactivated仅用于<keep-alive>包裹的组件 - 所有钩子只能在
setup()同步执行期间或setup内注册的watch/computed等副作用中调用（即“可组合函数”内部）
在自定义 Hook 中复用生命周期逻辑
这是解决“逻辑拆解痛点”的核心方式：把与生命周期耦合的业务逻辑封装进可复用的组合函数中，例如数据加载、事件监听、定时器管理：
- 在
useFetch中调用onMounted(() => fetch())和onUnmounted(() => abort()) - 在
useWindowSize中用onMounted绑定resize事件，onUnmounted清理监听器 - 避免在每个组件的
setup里重复写相同的生命周期绑定/清理逻辑
注意执行时机与响应性配合
生命周期钩子本身不具有响应性，但常需与响应式状态协同工作：
-
onMounted是首个可安全访问 DOM 的时机，适合操作 ref 元素：elRef.value?.focus() - 若需在
onUpdated中读取更新后的 DOM，确保操作在 nextTick 后执行：onUpdated(() => nextTick(() => elRef.value?.scrollIntoView())) - 不要在
onBeforeUnmount中修改响应式状态（可能触发已销毁组件的更新警告），只做清理
常见错误与规避方式
容易踩坑的地方集中在调用位置和依赖管理上：
- ❌ 在异步回调（如
setTimeout、Promise.then）中调用生命周期钩子 —— 会报错 “onMounted called when there is no active component instance” - ❌ 在
setup外部或非 setup 执行路径中调用（如单独导出的工具函数里） - ✅ 正确做法：所有钩子必须在
setup()函数体内顶层或其同步调用的组合函数内调用 - ✅ 若需条件注册（如仅在某环境下执行），用 if 包裹整个钩子调用，而不是把钩子放在条件内部再返回函数
