setup函数是composition api入口，非生命周期钩子；生命周期钩子需显式导入调用，执行顺序由vue调度，建议按onbeforemount→onmounted→onbeforeupdate→onupdated→onbeforeunmount顺序编写，并成对管理资源，避免onupdated中修改响应式数据。
setup 函数本身不是生命周期钩子，而是 Composition API 的入口函数，它在组件创建阶段最早执行；生命周期钩子需通过 显式导入并调用（如 onMounted、onUnmounted），它们的执行顺序由 Vue 内部调度决定，与 setup 中的书写顺序无关——但编写时仍需遵循逻辑先后和资源管理原则。
按实际执行时机组织钩子调用
虽然你在 setup 里先写 onUnmounted、后写 onMounted，Vue 依然会按生命周期顺序执行。但为了可读性和维护性，建议按真实执行流排列：
-
onBeforeMount→ DOM 挂载前（极少用，如预处理响应式数据） -
onMounted→ DOM 可访问时（发起请求、初始化图表、绑定事件） -
onBeforeUpdate→ 数据变化、DOM 更新前（记录旧状态） -
onUpdated→ DOM 已更新后（调整滚动位置、聚焦元素） -
onBeforeUnmount→ 组件销毁前（清理定时器、关闭连接、解绑监听）
关键钩子必须成对考虑资源生命周期
很多逻辑天然存在“开始-结束”关系，不能只写一半：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 在
onMounted启动定时器或轮询，就必须在onBeforeUnmount清除它，否则内存泄漏 - 在
onMounted添加全局事件（如window.resize），就得在onBeforeUnmount移除 - 使用第三方库（如 ECharts）时，初始化在
onMounted，销毁实例在onBeforeUnmount
避免在 onUpdated 中修改响应式数据
onUpdated 是 DOM 更新完成后的回调，此时若触发新的响应式变更，会再次触发更新，形成死循环：
- ❌ 错误：在
onUpdated里改ref或reactive值 - ✅ 正确：仅做 DOM 相关操作，比如
el.scrollIntoView()、focus()、尺寸测量 - 如果需要根据 DOM 状态反向更新数据，应改用
watch+ 条件判断，而非依赖onUpdated
setup 内部不等于钩子执行时机
setup 执行时，组件尚未挂载，ref 和 reactive 已可用，但真实 DOM 还不存在：
- 不能在 setup 顶层直接操作
document.getElementById——元素还没生成 - 所有 DOM 相关逻辑必须放在
onMounted或之后的钩子里 - 异步请求通常放
onMounted，除非你明确需要「创建即发请求」且不依赖 DOM（如预加载配置）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
