vue的生命周期

vue的生命周期

Vue2 生命周期可分为 4 大阶段，共 8 个核心钩子，执行顺序固定：

阶段	核心钩子（执行顺序）	说明
初始化阶段	beforeCreate → created	实例创建，数据 / 方法初始化
挂载阶段	beforeMount → mounted	实例挂载到 DOM 节点
更新阶段	beforeUpdate → updated	数据更新，DOM 重新渲染
销毁阶段	beforeDestroy → destroyed	实例销毁，清理资源

1. 初始化阶段（实例创建）

（1）beforeCreate（创建前）

• 执行时机：Vue 实例刚被创建，data、methods、props 等都未初始化，el 也未绑定。
• this 指向：已指向实例，但无法访问 data/methods。
• 使用场景：仅能做一些无依赖的初始化（如加载动画开启）。

（2）created（创建完成）

• 执行时机：data、methods、props 已初始化完成，可访问，但 DOM 未生成（$el 不存在）。
• 核心能力：可执行数据请求、初始化数据、监听事件等。
• 注意：此时 DOM 未挂载，无法操作 DOM（如 document.getElementById）。
• 使用场景：异步请求数据（无需等待 DOM）、初始化全局变量。

2. 挂载阶段（DOM 渲染）

（1）beforeMount（挂载前）

• 执行时机：模板编译完成，即将挂载到 DOM 节点（el 已存在），但真实 DOM 未生成（$el 为虚拟 DOM）。
• 核心能力：可最后修改数据（不会触发额外更新），仍无法操作真实 DOM。
• 使用场景：挂载前的最后数据调整。

（2）mounted（挂载完成）

• 执行时机：实例挂载到真实 DOM 节点，$el 指向真实 DOM，DOM 可操作。
• 核心能力：可操作 DOM（如初始化第三方插件：echarts、swiper）、执行依赖 DOM 的异步请求。
• 注意：若有子组件，父组件 mounted 会在所有子组件 mounted 之后执行吗？❌ 父组件 mounted 先执行，子组件 mounted 后执行。
• 使用场景：初始化 DOM 相关逻辑（如图表渲染、DOM 尺寸计算）。

3. 更新阶段（数据变化）

（1）beforeUpdate（更新前）

• 执行时机：数据发生变化，虚拟 DOM 重新渲染前触发。
• 核心能力：可获取更新前的 DOM 状态，修改数据不会触发重复更新。
• 使用场景：更新前记录 DOM 状态（如滚动位置）。

（2）updated（更新完成）

• 执行时机：虚拟 DOM 重新渲染并更新真实 DOM 后触发。
• 核心能力：可获取更新后的 DOM 状态，操作最新 DOM。
• 注意：避免在 updated 中修改数据（会触发无限循环更新）。
• 使用场景：更新后同步 DOM 状态（如重新计算图表尺寸）。

4. 销毁阶段（实例销毁）

（1）beforeDestroy（销毁前）

• 执行时机：实例销毁前触发，实例仍完全可用（data/methods/DOM 都可访问）。
• 核心能力：清理资源（如取消定时器、解绑自定义事件、销毁第三方插件实例）。
• 使用场景：防止内存泄漏（如 clearInterval(timer)）。

（2）destroyed（销毁完成）

• 执行时机：实例已销毁，所有指令、事件监听、子组件都已解绑 / 销毁。
• 注意：此时操作实例无意义，this 仍存在但已失去响应式能力。