Vue学习：11.了解生命周期

Vue.js框架为组件设计了一套完整的生命周期，涵盖了从创建到销毁的全过程。这些生命周期钩子函数（lifecycle hooks）允许开发者在特定的阶段执行自定义逻辑，以便更好地管理组件的状态和与其交互的DOM元素。Vue 的生命周期钩子函数可以分为三类：创建、更新和销毁，以下是Vue组件的核心生命周期及其大致执行顺序：

1. beforeCreate： 在实例初始化之后，数据观测（data observer）和事件/属性配置之前被调用。此时，组件的props和data还未初始化，不能访问它们。

2. created： 实例已经创建完成，所有props和data已经初始化，但挂载阶段未开始，$el属性还不存在，无法操作DOM。在此阶段可以进行一些初始数据的处理或异步数据的获取。

3. beforeMount： 模板编译完成，即将开始挂载到DOM节点。此时，$el属性已被赋值，但真实的DOM还未渲染出来，可以进行DOM相关的准备工作。

4. mounted： 组件已经被创建并成功挂载到DOM中，可以访问到真实的DOM元素并进行操作。如果需要与第三方库进行DOM交互或者触发某些依赖于DOM的初始化工作，此时是最合适的时机。

5. beforeUpdate： 数据发生变化触发更新时调用。此时新的DOM还未生成，可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

6. updated： 组件DOM已完成更新。此时可以访问到更新后的DOM，并执行依赖于新DOM的操作。注意避免在此处频繁操作DOM，以免引起不必要的性能损耗。

7. beforeUnmount： 组件即将卸载，可以在这一步进行必要的清理工作，如取消定时器、解绑事件监听器、清理第三方库实例等。

8. unmounted： 组件已被卸载，相关DOM元素已被销毁。此阶段后，不应再有任何与该组件相关的操作。

另外，Vue 2.2.0版本引入了两个额外的生命周期钩子：

1. activated： 仅适用于<keep-alive>缓存的组件。当组件被激活时（离开缓存并重新渲染）调用。

2. deactivated： 同样适用于<keep-alive>缓存的组件。当组件被停用并放入缓存时调用。

理解并合理利用Vue的生命周期钩子，可以帮助我们编写出结构清晰、高效且易于维护的组件代码。

为了方便理解，可以看下面这张图（图片来源于黑马程序员，侵删）。它展示了从创建一个Vue实例开始，到销毁该实例为止的整个过程中的各个关键阶段和对应的钩子函数。其实最为常用的有：

1. created：在实例创建完成后调用，此时数据观测和事件配置都已经生效，但还没有开始渲染。

2. mounted：在模板渲染成HTML后调用，此时可以访问到真实的DOM元素。