Vue 生命周期别背顺序了：先弄清楚每个阶段该做什么

学 Vue 时，生命周期几乎是绕不过去的一章。

很多人一开始会背：

• created
• mounted
• updated
• destroyed

顺序当然要知道，但真正写项目时，更重要的问题其实是：哪些逻辑该放在哪个阶段。

生命周期不是为了背名词

生命周期存在的意义，是让你知道组件此刻处于什么状态。

数据是不是已经初始化了，DOM 是不是已经挂载了，页面是不是刚更新完，这些信息会直接决定你在这个阶段能做什么。

created 更适合处理数据准备

到了 created，组件的数据和方法已经准备好了，但真实 DOM 还没挂到页面上。

所以这个阶段更适合：

• 初始化数据
• 发起请求
• 做纯逻辑处理

如果你只是要拿数据、准备状态，很多时候放在这里就够了。

mounted 才适合碰 DOM

如果你要做的是：

• 获取元素尺寸
• 操作第三方 DOM 库
• 依赖页面真实节点

那就更适合放在 mounted。

因为只有到了这个阶段，组件的 DOM 才真正进了页面。

updated 不是补丁桶

很多人一发现界面更新后要再做点事，就会想到 updated。它当然能用，但也最容易被滥用。

因为一旦组件更新频繁，这个钩子也会跟着频繁触发。

所以如果你只是想在某个字段变化后做动作，很多时候用 watch 会更明确，而不是把逻辑一股脑塞进 updated。

destroyed 别只想着“组件被删了”

这个阶段真正要关注的是清理。

例如：

• 解绑事件
• 清理定时器
• 销毁第三方实例

这些事情如果不做，页面看起来可能没马上出问题，但后面很容易留下隐患。

写在最后

Vue 生命周期真正难的地方，不是顺序，而是时机感。

什么时候该拿数据，什么时候该碰 DOM，什么时候该做清理，只要这些边界分清楚，生命周期就不再是一串需要背诵的名字，而是你组织组件逻辑的坐标点。