Vue 组件的生命周期：从创建到销毁

Vue 组件的生命周期：从创建到销毁

在 Vue.js 中，组件的生命周期是指组件从创建到销毁的整个过程。这个过程可以分为几个阶段，每个阶段都有特定的生命周期钩子函数（也称为生命周期函数或生命周期钩子）。通过这些钩子，开发者可以在组件的特定时刻执行特定的操作。理解生命周期对于掌握 Vue 的高级用法至关重要。

一、生命周期的类比：组件与人的生命周期

为了更好地理解组件的生命周期，我们可以将其与人的生命周期进行类比。人的一生可以分为几个阶段：出生、成长、经历和死亡。类似地，Vue 组件的生命周期也可以分为几个阶段：创建、挂载、更新和销毁。以下是两者的对比：

1. 创建阶段（Creation）从无到有

• 人：在母亲肚子里孕育的过程。

• 组件：组件实例被创建的过程。在这个阶段，组件的 data 和 methods 还未初始化。

1. 挂载阶段（Mounting）

• 人：出生，正式进入这个世界。

• 组件：组件被挂载到 DOM 中，开始与用户交互。

1. 更新阶段（Updating）

• 人：经历各种事情（如上学、工作、结婚等），不断成长和变化。

• 组件：组件的 data 或 props 发生变化，导致组件重新渲染。

1. 销毁阶段（Destruction）

• 人：生命的结束，所有资源被释放。

• 组件：组件被销毁，从 DOM 中移除，组件实例也被销毁。

通过这种类比，我们可以更直观地理解组件生命周期的各个阶段。

二、Vue 组件生命周期的四个阶段

每个阶段对应两个钩子函数，而事实上钩子函数比八个要多

1. 创建阶段（Creation）

创建阶段是组件实例被创建的过程，主要包含以下两个生命周期钩子：

• beforeCreate：在组件实例被创建之前调用。此时，组件的 data 和 methods 还未初始化，因此不建议在这个阶段操作数据。

• created：在组件实例被创建后调用。此时，data 和 methods 已经初始化完成，但 DOM 还未生成。这是一个常用的生命周期钩子，适合进行数据初始化、API 请求等操作。

2. 挂载阶段（Mounting）

挂载阶段是组件被挂载到 DOM 中的过程，主要包含以下两个生命周期钩子：

• beforeMount：在组件挂载到 DOM 之前调用。此时，组件的 template 已经被编译为虚拟 DOM，但还未渲染到页面上。

• mounted：在组件挂载到 DOM 之后调用。此时，DOM 已经渲染完成，可以操作 DOM 元素。这也是一个常用的生命周期钩子，适合进行 DOM 操作、绑定事件监听等。

3. 更新阶段（Updating）

更新阶段是组件数据发生变化并重新渲染的过程，主要包含以下两个生命周期钩子：

• beforeUpdate：在组件数据更新之前调用。此时，组件的 data 或 props 发生了变化，但 DOM 还未更新。

• updated：在组件数据更新之后调用。此时，DOM 已经根据新的数据重新渲染。需要注意的是，updated 不会保证所有子组件都已完成更新，因此需要谨慎使用。

创建和挂载只有一次，而更新可以有很多次，就像谈一个女朋友更新一次。。。哈哈哈

4. 销毁阶段（Destruction）

销毁阶段是组件被销毁的过程，主要包含以下两个生命周期钩子：

• beforeDestroy：在组件销毁之前调用。此时，组件仍然在 DOM 中，可以进行一些清理操作，比如解绑事件监听、清除定时器等。

• destroyed：在组件销毁之后调用。此时，组件已经从 DOM 中移除，组件实例也被销毁。

三、生命周期钩子的用途

每个生命周期钩子都有其特定的用途，以下是常见生命周期钩子的使用场景：

• created：适合进行数据初始化、API 请求。

• mounted：适合操作 DOM、绑定事件监听。

• beforeUpdate 和 updated：适合在数据更新时进行操作，但要小心避免无限循环。

• beforeDestroy 和 destroyed：适合进行清理操作，比如解绑事件、清除定时器。

当然这上面我说的是vue2 ，对与vue3 它的生命周期和vue2是相同的，只是钩子函数不同

对于vue3来说，

setup：在组件创建时执行，替代了 beforeCreate 和 created。setup 是 Vue 3 生命周期的起点，适合进行数据初始化和逻辑处理。

onBeforeMount：在组件挂载到 DOM 之前调用。

onMounted：在组件挂载到 DOM 之后调用。

onBeforeUpdate：在组件数据更新之前调用。

onUpdated：在组件数据更新之后调用。

onBeforeUnmount：在组件销毁之前调用。

onUnmounted：在组件销毁之后调用。

整体上来说，Vue3和Vue2的生命周期相同，只是钩子函数名有所不同

常用的钩子函数onMounted（挂载完毕） onUpdated（更新完毕）和onBeforeUnmount（卸载之前）

对比我们人生，出生之后，上学、谈恋爱、结婚之后，还有死之前。。。很多人来讨论分财产的事哈哈哈

四、总结

Vue 组件的生命周期是组件从创建到销毁的整个过程，分为创建、挂载、更新和销毁四个阶段。每个阶段都有特定的生命周期钩子，开发者可以在这些钩子中执行特定的操作。理解生命周期对于掌握 Vue 的高级用法至关重要。

希望这篇文章能帮助你更好地理解 Vue 组件的生命周期。如果你还有其他问题，欢迎继续提问。

小技巧：

拿到一个前端项目如果启动呢？

找到package.json文件，有个scripts部分，有个serve，就是启动项目的命令，一般情况下vue3是 npm run dev，而vue2是npm run serve

这篇文章从类比的角度出发，详细介绍了 Vue 组件生命周期的各个阶段及其生命周期钩子的用途，希望能帮助读者更好地理解和应用。