Vue 3生命周期简介_成长日记_created房子基础已经打好可以开始装修了

Vue 3生命周期简介

Vue 3的生命周期就像组件的“成长日记”，它记录了组件从出生到死亡的每一个重要时刻。这些时刻被称作生命周期钩子函数，允许我们在组件的不同阶段执行特定的代码。

生命周期阶段详解

一、创建阶段

在这个阶段，组件刚开始搭建，还没有准备好展示自己。

• beforeCreate：就像刚拿到砖瓦，还没开始盖房子。
• created：房子基础已经打好，可以开始装修了。

二、挂载阶段

组件准备展示自己了，从幕后走到台前。

• beforeMount：就像在舞台后台准备，还没上台。
• mounted：登上舞台，观众可以看到你了。

三、更新阶段

组件需要更新自己的状态，比如数据变化了。

• beforeUpdate：就像在后台换衣服，还没上台。
• updated：换好了，重新上台。

四、卸载阶段

组件要退休了，准备离开舞台。

• beforeUnmount：在后台收拾东西，准备离开。
• unmounted：已经离开舞台，不再可见。

五、生命周期钩子函数表

下面是一个表格，列出了Vue 3的每一个生命周期钩子函数和它们的作用：

六、实例说明

这里有一个简单的示例，展示了如何使用这些生命周期钩子函数：

• 组件创建时，控制台会依次打印 beforeCreate 和 created 的信息。
• 组件挂载过程中，控制台会打印 beforeMount 和 mounted 的信息。
• 当点击按钮改变数据的值时，更新阶段的钩子函数 beforeUpdate 和 updated 也会被触发并打印信息。
• 最后，当组件被卸载时，会打印 beforeUnmount 和 unmounted 的信息。

七、总结

Vue 3的生命周期钩子函数让开发者可以在组件的各个阶段执行特定的代码，从而更好地控制组件的行为和状态。合理地使用这些钩子函数，可以提高代码的质量和效率。