组合式函数中安全注册生命周期钩子需确保同步顶层调用、绑定活跃组件实例，优先使用 tryOnBeforeUnmount 防御非组件环境，并针对 keep-alive 场景改用 onDeactivated/onActivated。
在组合式函数中安全注册生命周期钩子，关键在于确保调用时机与组件上下文严格对齐，同时避免脱离活跃实例时引发 Vue 报错。最稳妥的方式是依赖 Vue 内部的 currentInstance 机制，并借助 VueUse 提供的防御性封装工具。
必须在同步顶层调用
所有生命周期钩子（如 onMounted、onBeforeUnmount）只能在组件 setup 执行期间、或其直接调用的组合式函数最外层同步执行。Vue 通过当前活跃组件实例自动绑定钩子，一旦进入异步回调、定时器、事件监听器内部，就无法注册。
- ✅ 正确：在自定义 hook 函数体第一行就调用
onBeforeUnmount(() => {...}) - ❌ 错误：把
onMounted包进setTimeout或addEventListener回调里再执行 - ⚠️ 注意：
<script setup></script>中所有顶层语句天然等价于setup()内部执行，可直接使用
成对注册 + 自动清理是基本要求
组合式函数不仅要注册钩子，还要负责副作用的完整生命周期管理。常见模式是在挂载阶段建立资源，在卸载前清除。
Element Plus UI Vue3
下载
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
- 例如：用
onMounted启动定时器或添加全局事件监听 - 对应地，用
onBeforeUnmount清除定时器、移除监听、断开 WebSocket 连接 - 返回值只需暴露业务数据（如
ref或reactive对象），无需让用户手动管理清理逻辑
用 tryOnBeforeUnmount 防御非组件环境
当组合式函数可能被用于非组件上下文（如纯工具模块、测试环境、条件渲染分支中），直接调用 onBeforeUnmount 会触发 Vue 警告。此时应改用 VueUse 的 tryOnBeforeUnmount。
- 它内部会检查是否存在活跃组件实例，有则正常注册，无则静默跳过
- 适合写在可复用性高的 hook 中，尤其当调用方不确定是否处于组件内时
- 导入方式：
import { tryOnBeforeUnmount } from '@vueuse/core'
避开 keep-alive 和异步组件的陷阱
如果组合式函数用于 onBeforeUnmount 不会触发（组件只是被缓存而非销毁）。此时应改用 onDeactivated 和 onActivated。
-
onDeactivated对应“进入缓存”，适合暂停轮询、暂存状态 -
onActivated对应“重新激活”，适合恢复轮询、刷新视图 - 普通 hook 中不要误用这两个钩子，它们仅对
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
