Vue组件生命周期分为挂载、更新、销毁三阶段：挂载阶段onBeforeMount（虚拟DOM生成）、onMounted（DOM可用）；更新阶段onBeforeUpdate（DOM更新前）、onUpdated（DOM更新后）；销毁阶段onBeforeUnmount（清理资源）、onUnmounted（实例销毁）。
Vue组件的生命周期钩子，是开发者在关键节点插入自定义逻辑的入口。理解挂载、更新、销毁这三个核心阶段的执行顺序和能力边界，能避免常见错误（比如在未挂载时操作DOM），也能做好资源清理。
挂载阶段：从数据就绪到真实DOM可用
这个阶段确保组件完成初始化并渲染到页面上。重点有两个钩子：
-
onMounted：组件已挂载，
this.$el（或组合式API中的ref）可访问真实DOM。适合初始化图表库、绑定事件监听器、获取元素尺寸等依赖DOM的操作。 -
onBeforeMount：虚拟DOM已生成，但尚未替换页面上的真实节点。此时
data可用，但$el仍指向挂载点原始DOM（未渲染）。极少需要干预，除非做服务端渲染适配或极早期模板微调。
更新阶段：响应数据变化，精准控制重渲染
当响应式数据变更触发重新渲染时，Vue会在DOM更新前后提供两个钩子：
- onBeforeUpdate：数据已变，虚拟DOM即将重绘，但真实DOM还未更新。可在此读取更新前的DOM状态，例如保存滚动位置或表单焦点。
- onUpdated：DOM已完成更新。适合执行依赖新布局的操作，比如调整第三方UI组件尺寸、触发动画。注意：不要在此修改响应式数据，否则会再次触发更新，造成死循环。
销毁阶段：安全释放资源，防止内存泄漏
组件被移除前必须清理副作用。最关键的钩子是：
立即学习“前端免费学习笔记（深入）”；
- onBeforeUnmount：组件即将从DOM中卸载，但实例仍完全可用。这是清理定时器、取消网络请求、解绑全局事件监听器的最后可靠时机。
-
onUnmounted：组件已彻底销毁，实例不再可用。一般无需在此写逻辑，因为资源应在
beforeUnmount中清完；若需记录日志或触发外部通知，可在此处理。
特别提醒：setup不是生命周期钩子，而是起点
setup()函数在组件实例创建后立即执行，早于所有生命周期钩子。它替代了Vue 2中的beforeCreate和created，负责响应式数据声明、方法定义和钩子注册。你写的onMounted(() => {...})就是在setup里注册的，真正执行要等到挂载完成。
