vue组件生命周期钩子按创建、挂载、更新、卸载及keepalive场景分阶段执行：beforecreate时数据未初始化，created可发起api请求，beforemount模板已编译但dom未渲染，mounted可操作真实dom，beforeupdate和updated用于响应式更新前后，beforeunmount需清理资源，activated/deactivated专用于keep-alive缓存控制。
Vue 组件生命周期钩子不是按时间顺序排列的清单，而是一套与响应式更新、DOM 渲染、父子关系紧密咬合的执行机制。理解它，关键在于搞清“数据在哪一步可用”“DOM 在哪一刻真实存在”“父子组件谁先谁后”，而不是死记八个函数名。
创建阶段：数据还没活，但逻辑可以起步
beforeCreate 和 created 是最早触发的两个钩子，发生在 Vue 实例初始化过程中。
-
beforeCreate：实例刚诞生，data、methods、computed 都未初始化，
this.$data和this.xxx全是undefined；适合插件注入或全局配置预处理，不能访问任何业务数据 -
created：响应式系统已就位，data 已转为响应式对象，methods 可调用，watch/computed 已建立依赖；这是发起异步请求（如 API 获取列表）、初始化非 DOM 相关状态的最佳时机；
this.$el仍不可用，不能操作 DOM
挂载阶段：模板落地，DOM 第一次可触达
beforeMount 和 mounted 标志着组件从虚拟节点走向真实页面的过程。
-
beforeMount：模板已完成编译，生成了 render 函数，但尚未执行渲染；
this.$el还是挂载占位符（比如<div id="app"></div>），内部仍是空的；可做最后一次数据微调，但极少使用 -
mounted：虚拟 DOM 已 patch 到真实 DOM，
this.$el指向完整渲染后的根元素；这是操作 DOM、初始化第三方库（如 Chart.js、Mapbox）、获取元素尺寸、启动定时器的首个安全时机；注意：服务端渲染（SSR）中此钩子不执行
更新阶段：响应式驱动的重绘闭环
beforeUpdate 和 updated 成对出现，每次响应式数据变更触发视图更新时都会执行。
- beforeUpdate：新虚拟 DOM 已生成，旧 DOM 尚未替换；此时可读取更新前的 DOM 状态（如滚动位置、焦点元素），适合做差异快照或过渡前准备
- updated：DOM 已完成替换，所有节点更新完毕；可安全执行依赖新 DOM 结构的操作（如重新计算布局、聚焦某输入框）；但应避免在此修改响应式数据，否则可能引发无限循环
卸载与特殊场景：清理与缓存控制
销毁阶段钩子保障资源不泄漏，KeepAlive 场景则引入额外维度。
- beforeUnmount / beforeDestroy：实例即将被移除，但所有属性、方法、事件监听器仍有效；必须在此清除定时器、取消网络请求、解绑全局事件（如 window.resize），防止内存泄漏
- unmounted / destroyed：清理已完成，实例彻底失活；一般无需在此写逻辑，仅用于确认销毁或埋点统计
-
activated / deactivated：仅在
<keep-alive></keep-alive>包裹的组件中生效；组件被激活（进入视图）时触发 activated，被缓存（离开视图）时触发 deactivated；适合管理局部状态持久化或暂停/恢复动画
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
