组合式函数中生命周期钩子需在函数顶层同步调用，onmounted/onunmounted用于dom操作与清理，onbeforeupdate/onupdated慎用，ssr环境下自动失效。
组合式函数中管理生命周期钩子，核心是把副作用逻辑和组件生命周期绑定起来，让复用的逻辑能自动随组件启停而启停。
onMounted 和 onUnmounted 是最常用的一对
它们适合封装需要访问 DOM 或注册全局监听器的逻辑。比如鼠标位置跟踪、窗口尺寸监听、第三方图表初始化等。
- 必须在 setup() 同步调用，不能放在异步回调或条件语句里
- onMounted 中可安全操作 DOM，但要注意根容器是否已在文档中
- onUnmounted 是清理入口，务必移除事件监听、清除定时器、断开 WebSocket 连接等
更新类钩子要谨慎使用
onBeforeUpdate 和 onUpdated 主要用于响应 DOM 变化做同步处理，但实际复用场景有限。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- onUpdated 不适合修改响应式状态，否则可能触发无限循环
- 如果只是想在某次状态变更后读取新 DOM，优先用 nextTick() 替代 onUpdated
- 多数情况下，计算属性或 watch 更清晰、更可控
组合式函数里生命周期钩子的调用位置很关键
它们不能写在 return 的对象里，也不能延迟执行——必须在函数体顶层同步注册。
- 错误写法：在 if 分支里调用 onMounted，或在 setTimeout 回调中调用
- 正确做法：像 useMouse() 那样，在函数定义开始就调用 onMounted/onUnmounted
- 多个组合式函数可以各自挂载自己的生命周期钩子，互不干扰
服务端渲染时这些钩子自动失效
所有以 on 开头的组合式生命周期钩子（如 onMounted、onUpdated）在 SSR 环境中不会执行。
- 无需额外判断 isClient，Vue 内部已屏蔽
- 涉及 DOM 的逻辑天然只在客户端运行，适合做 CSR 专属初始化
- 若需 SSR 兼容，应把数据获取等逻辑放在 setup 顶层或 useFetch 类组合式函数中
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
