vue组件生命周期钩子按“数据准备→视图挂载→状态更新→资源释放”主线展开：created适合api请求，mounted初始化dom操作，beforeupdate清理旧状态，updated处理新dom，beforeunmount/unmounted清除资源，keep-alive组件另有activated/deactivated。
Vue 组件生命周期钩子是组件从初始化到销毁过程中，Vue 自动调用的函数节点。它们不是凭空出现的“魔法”，而是围绕“数据准备 → 视图挂载 → 状态更新 → 资源释放”这条主线自然展开的。掌握它们的关键，不在于死记顺序，而在于理解每个阶段“能做什么、不能做什么、该做什么”。
初始化阶段：数据就绪，但 DOM 还没影儿
组件刚被创建，响应式系统已启动，但页面上什么都没渲染出来。
-
beforeCreate：实例刚诞生，data、methods、computed 都未初始化，
this几乎不可用。极少直接使用，适合插件全局注入或极早期配置。 -
created：响应式数据和方法已就位，可安全访问
this.data和调用this.methods；$el仍不存在，不能操作 DOM。这是发起 API 请求、初始化非 DOM 依赖状态的最佳时机。
挂载阶段：模板变成真实 DOM，组件真正“活”了
组件首次渲染完成，正式出现在页面上，具备完整的视图能力。
-
beforeMount：虚拟 DOM 已生成，但尚未替换真实 DOM；
this.$el是挂载点原始元素（比如一个空 div），里面还是模板字符串（如{{ message }}）。适合做最后一次数据调整，或预处理渲染逻辑。 -
mounted：DOM 已真实挂载，
this.$el可访问并操作；第三方库（如 ECharts、Swiper）、定时器、DOM 事件监听都应在此处初始化。注意：避免在此大量修改 data，否则可能触发额外更新。
更新阶段：数据变，视图跟着动，但有先后顺序
只要响应式数据变化且影响模板，就会进入更新流程——不是每次赋值都触发，只在视图需要重绘时才走。
- beforeUpdate：虚拟 DOM 重渲染前，DOM 还是旧的。可用于保存当前滚动位置、移除临时事件监听等“清理型”操作。
- updated：DOM 已打补丁完成，新内容可见。适合执行依赖最新 DOM 的逻辑，比如重新计算尺寸、聚焦输入框。慎在这里修改响应式数据，否则可能引发无限循环。
销毁阶段：干净退场，不留下一点痕迹
组件被移除前后的最后两个关键节点，是防止内存泄漏的守门人。
- beforeUnmount（Vue 3） / beforeDestroy（Vue 2）：组件仍完全可用，所有属性、方法、DOM 都在。必须在此清除定时器、取消 API 请求、解绑自定义事件或全局监听器。
-
unmounted（Vue 3） / destroyed（Vue 2）：实例已解绑，指令卸载，子组件销毁，
this不再有效。适合做最终日志记录或通知其他模块，不能再操作数据或 DOM。
另外两个特殊钩子 onActivated 和 onDeactivated 仅在 <keep-alive></keep-alive> 包裹的组件中生效，分别对应“缓存组件被激活显示”和“被隐藏缓存”，用于管理保活组件的状态切换。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
