在 script setup 中使用生命周期钩子需显式从 'vue' 导入 onMounted 等钩子，可多次调用且按注册顺序执行，支持在自定义组合函数中封装逻辑，onMounted 中 DOM 可用，适合初始化操作。
在 script setup 中使用生命周期钩子，核心就一点：直接导入、按需调用，无需手动绑定 this 或处理上下文。它天然适配组合式逻辑，让生命周期行为和业务代码真正“聚在一起”。
必须显式导入 onX 钩子
Vue 3 的生命周期钩子不是全局可用的，也不是自动注入 setup 上下文的。你得主动从 'vue' 导入：
-
onMounted、onUnmounted、onBeforeUpdate等都需单独 import - 不导入就调用会报错（如
ReferenceError: onMounted is not defined） - 只导入实际用到的钩子，避免冗余，也利于 tree-shaking
钩子可多次注册，执行顺序与注册顺序一致
同一个钩子（比如 onMounted）可以被多次调用，适合拆分关注点：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 一个 hook 函数里注册清理逻辑，另一个里初始化 DOM 操作
- 多个自定义组合函数（composable）各自调用
onUnmounted做局部资源释放 - 所有回调按注册顺序依次执行，无竞态风险
在自定义组合函数（composable）中封装生命周期逻辑
这是真正“优雅”的关键——把生命周期耦合进逻辑单元，而不是堆在组件顶层：
立即学习“前端免费学习笔记（深入）”；
- 例如写一个
useScrollListener，内部直接用onMounted绑定事件、onUnmounted解绑 - 使用者只需
const { scrollY } = useScrollListener()，完全不用关心生命周期细节 - 钩子调用发生在 setup 执行期间，因此能正常访问 ref、computed 等响应式状态
注意执行时机与响应式配合
钩子内部访问响应式数据是安全的，但要留意 DOM 可用性：
-
onMounted中才能确保ref绑定的元素已挂载，可放心调用el.focus()或el.scrollIntoView() -
onBeforeMount还没渲染，DOM 不可用；onUpdated后 DOM 已重绘，适合做尺寸测量 - 异步操作（如 API 请求）建议放在
onMounted，避免服务端渲染（SSR）时执行失败
