Vue3 入门-第六篇：组件的生命周期

第六篇：组件的生命周期

1. 生命周期概述

Vue 组件如同一个有生命的个体，从创建、挂载到更新，直至最终销毁，经历了一系列明确的阶段，这些阶段构成了组件的生命周期。理解组件生命周期对于开发者编写高效、可维护的代码至关重要，它能让我们在组件的不同阶段执行特定的操作，比如在组件创建时初始化数据，挂载后执行 DOM 操作，更新时重新计算数据，销毁前清理资源等。

1. 创建阶段：在这个阶段，Vue 会为组件实例分配内存空间，初始化数据、方法以及事件等。此时组件尚未挂载到 DOM 上。
2. 挂载阶段：Vue 将组件的虚拟 DOM 渲染成真实 DOM，并插入到页面中。挂载完成后，组件就可以在页面上展示并与用户进行交互。
3. 更新阶段：当组件依赖的数据发生变化时，Vue 会检测到这些变化，并重新渲染组件。这个过程包括重新计算虚拟 DOM，找出变化的部分，并更新真实 DOM。
4. 销毁阶段：当组件不再需要时，比如从页面中移除，Vue 会执行清理操作，销毁组件实例，解绑事件，移除定时器等，以释放资源。

2. 常用生命周期钩子

setup 函数：组件的初始化逻辑

在 Vue 3 中，setup 函数是一个新的组件选项，它在组件创建阶段被调用，是组件初始化逻辑的入口点。setup 函