Vue生命周期通俗讲解·数据和方法都已经准备好了·这时候就像是你刚拿到一个新玩具可以开始给它上色和贴标签了

作者：机器人技术佬 | 发布时间：2025-07-07 |

在Vue组件刚被创建的时候，有几个关键时刻可以用来设置初始状态和监听事件。这时候就像是你刚拿到一个新玩具，可以开始给它上色和贴标签了。

1.1 beforeCreate

在这个阶段，组件实例刚被创建，但是还没开始设置数据和监听器，所以这时候你只能看到个“空壳”。

1.2 created

到了这个阶段，实例已经创建好了，数据和方法都已经准备好了，但是它还不在页面上，就像玩具还没贴标签，但是已经准备好上色了。

组件要真正“出现在”页面上，需要经过挂载的过程。在这个过程中，Vue提供了两个钩子来让你在组件挂载前后执行操作。

2.1 beforeMount

在这个阶段，组件的模板已经编译好了，但是DOM还没开始渲染，就像是玩具的包装已经打开，但是玩具还没从盒子里出来。

2.2 mounted

到了这个阶段，组件已经被挂载到了页面上，你可以和DOM元素互动了，就像是玩具已经完全展开，你可以开始玩它了。

组件的数据经常变化，Vue有专门的钩子来处理这些变化。

3.1 beforeUpdate

在这个阶段，组件的数据即将发生变化，但是DOM还没更新，就像是玩具即将被上色，但是还没开始。

3.2 updated

数据变化后，DOM也更新完成了，这时候你可以检查一下DOM是否如预期那样更新了，就像是玩具已经被涂上了你喜欢的颜色。

组件用完之后，Vue会帮我们清理一下，释放资源。

4.1 beforeDestroy

在这个阶段，组件即将被销毁，但是它还在工作状态，就像是玩具快被收起来，但是你还可以玩。

4.2 destroyed

组件已经被销毁了，所有的监听器和事件都已经清理干净，就像是玩具已经被收进了玩具箱。 Vue的生命周期就像是一个玩具的诞生、成长、玩耍和最后被收起来的过程。通过理解并使用这些生命周期钩子，你可以更好地管理组件的状态和行为，让应用运行得更高效、更稳定。