Vue 组件的生命周期钩子 的简单理解（通俗：用点外卖例子

目录

1. beforeCreate（创建前）

2. created（创建后）

3. beforeMount（挂载前）

4. mounted（挂载后）

5. beforeUpdate（更新前）

6. updated（更新后）

7. beforeUnmount（销毁前）

8. unmounted（销毁后）

一句话总结完整流程

---

1. beforeCreate（创建前）

• 类比场景：你刚打开外卖 App，点击 “下单” 按钮 → 系统刚接到订单，但还没分配商家、没准备食材。
• 实际状态：组件刚被实例化，data（订单信息）、methods（下单逻辑）都没初始化，啥也干不了。
• 能做啥：几乎无（数据、方法都未初始化，无法操作 ）。
• 一句话：组件 “刚诞生，啥数据 / 功能都没有”。

2. created（创建后）

• 类比场景：系统分配了商家，商家确认订单，食材、厨师、配送都安排好了，但餐还没做、没配送。
• 实际状态：data（订单信息）、computed（比如 “预计送达时间”）、methods（催单逻辑）都准备好了，但餐还没 “送到你手上”（DOM 没生成）。
• 能做啥：可发起网络请求（如请求用户地址、菜品详情 ）；初始化非 DOM 相关逻辑（如设置定时器实现自动催单 ）。
• 一句话：组件 “数据、逻辑 ready，但还没显示到页面”。

3. beforeMount（挂载前）

• 类比场景：商家做好餐，外卖员取到餐，正在来你家的路上，但还没敲门。
• 实际状态：组件的 “响应式数据、逻辑” 都 OK 了，马上要渲染成 DOM 显示到页面，但当前还没有真正的 DOM 节点。
• 能做啥：可最后调整数据（极少用，因即将渲染 ），一般无特殊操作。
• 一句话：组件 “马上要显示，DOM 还没生成”。

4. mounted（挂载后）

• 类比场景：外卖员敲门，你拿到外卖，餐已经送到你手上。
• 实际状态：组件已经渲染成真实 DOM，显示到页面上！$el 可以拿到 DOM 元素（比如页面里的 “确认收货” 按钮 ）。
• 能做啥：执行需 “真实 DOM” 的操作（如初始化地图 / 图表库，让其在页面渲染；给 DOM 元素绑定事件监听 ）。
• 一句话：组件 “已经显示到页面，能操作 DOM 了”（比如初始化地图、图表 ）。

5. beforeUpdate（更新前）

• 类比场景：你吃外卖时，发现少送了一杯饮料 → 你发起 “补发请求”（修改响应式数据 ），系统准备更新订单状态（DOM 要变 ），但还没真正修改。
• 实际状态：响应式数据变了（比如 drink: true → drink: false ），Vue 准备更新 DOM 前调用。
• 能做啥：在 DOM 改变前，访问旧 DOM 状态（如保存滚动条位置、记录输入框未提交内容 ）。
• 一句话：组件 “数据变了，DOM 马上要更新，先看一眼旧 DOM”。

6. updated（更新后）

• 类比场景：系统补发饮料，外卖员再次敲门 → 你拿到新饮料，订单状态更新为 “已补发”（DOM 已更新 ）。
• 实际状态：DOM 已经更新完毕（比如页面上显示 “已补发饮料” ）。
• 能做啥：执行需 “最新 DOM” 的操作（如重新计算页面元素尺寸、位置，让第三方库适配新 DOM ）。
• 一句话：组件 “DOM 已经更新，用新 DOM 做后续逻辑”。

7. beforeUnmount（销毁前）

• 类比场景：你吃完外卖，准备关 App → 系统准备移除订单，但还没真正清理订单数据、配送记录。
• 实际状态：组件要被销毁（比如路由切换、v-if 为 false ），但还没完全消失，组件功能还在。
• 能做啥：做紧急收尾（如取消未完成的网络请求、清除定时器，避免组件销毁后仍执行 ）。
• 一句话：组件 “马上要销毁，最后做紧急收尾”（比如取消网络请求 ）。

8. unmounted（销毁后）

• 类比场景：你关了 App，订单彻底从系统消失，配送记录、临时数据全被清理。
• 实际状态：组件已经完全销毁，DOM 也被移除。
• 能做啥：执行 “彻底清理”（如移除全局事件监听、清理与服务器的连接，防止内存泄漏 ）。
• 一句话：组件 “已经销毁，做最终大扫除”。

一句话总结完整流程

组件从 “创建 → 显示 → 更新 → 销毁”，就像 “点外卖 → 吃外卖 → 清理订单”：

• beforeCreate：刚下单，啥都没准备，无操作空间
• created：订单确认，可请求数据、初始化非 DOM 逻辑
• beforeMount：餐待配送，几乎无特殊操作
• mounted：拿到外卖，可操作 DOM、初始化第三方库
• beforeUpdate：发现漏餐，更新前记录旧 DOM 状态
• updated：拿到补发，用新 DOM 调整页面逻辑
• beforeUnmount：吃完关 App，取消请求、清定时器
• unmounted：关 App 后，彻底清理事件、连接等残留