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></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 包裹整个钩子调用，而不是把钩子放在条件内部再返回函数

大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！