最清晰可控的生命周期管理方式是在setup中按需导入并调用对应钩子，精准匹配逻辑职责与时机，协同watch/computed，并封装为可复用composable，辅以错误边界与调试支持。
直接在 setup 中按需导入并调用对应的生命周期钩子函数，是处理复杂组件生命周期管理最清晰、最可控的方式。关键不在于“全写一遍”，而在于根据逻辑职责精准匹配钩子时机，并配合响应式系统协同工作。
按阶段明确职责，避免逻辑混杂
复杂组件往往涉及数据加载、DOM 操作、事件监听、定时器、第三方库初始化等不同任务，每类任务应绑定到最合适的生命周期节点：
- onBeforeMount：适合做非响应式初始化（如设置初始状态标记、预置全局配置），此时 DOM 尚未生成，但响应式系统已就绪
- onMounted：执行依赖真实 DOM 的操作（如聚焦输入框、初始化图表库、发起首屏数据请求）、启动定时器或 WebSocket 连接
- onBeforeUpdate：在视图更新前介入，可用于比对前后数据差异，决定是否跳过某些计算或触发防抖逻辑
- onUpdated：仅在 DOM 更新后运行，适合需要读取最新 DOM 尺寸或位置的操作（如滚动定位、Canvas 重绘）
- onBeforeUnmount：清理资源的黄金时机——清除定时器、取消 pending 请求、解绑 window 事件、销毁第三方实例（如 Map 实例、Editor 实例）
- onUnmounted：执行最终收尾，比如释放内存引用、记录卸载日志、重置全局状态（若必要）
与 watch 和 computed 协同组织逻辑
生命周期钩子不是孤立存在的，它常与响应式能力联动，形成闭环：
- 在 onMounted 中发起请求后，用 watch 监听响应式数据变化，驱动 UI 状态流转（如 loading → success → error）
- 将频繁依赖多个响应式字段的派生逻辑封装进 computed，而非在 onUpdated 里手动计算，避免重复执行
- 当某个副作用（如订阅外部状态）需随 props 或 reactive 对象变化而重建时，可在 onBeforeUpdate 或 watchEffect 中统一管理，比分散在多个钩子里更易维护
拆分逻辑为可复用的组合式函数（Composable）
对于跨组件重复出现的生命周期行为（如权限校验后加载菜单、表单自动保存、滚动懒加载），应抽象为独立的组合式函数：
- 每个函数内部自行调用 onMounted、onBeforeUnmount 等，封装完整生命周期链路
- 返回值统一用 ref 包裹状态，便于组件解构后保持响应性（例如
const { loading, data, refresh } = useMenuData()） - 函数接收参数时，若传入 ref，应在内部用 watch 显式监听；若传入普通对象，可用 watchEffect 自动追踪其响应式属性
错误边界与调试支持不可忽略
复杂组件容易因嵌套深、异步多引发运行时错误，需主动增强健壮性：
- 在根组件或关键业务组件中使用 onErrorCaptured，捕获子组件抛出的错误，统一降级处理（如显示错误提示、上报日志）
- 在开发环境为关键钩子添加 console 标记（如
console.log('[user-profile] onMounted')），便于快速定位挂载/卸载异常 - 避免在 onUnmounted 后仍尝试修改已销毁组件的响应式状态，可通过 isRef 或自定义标志位判断组件是否活跃
