vue 的生命周期

一、创建阶段（BeforeCreate、Created）

1. BeforeCreate

这是组件实例刚被创建时触发的第一个生命周期钩子。此时，组件的`data`和`methods`等选项还没有被初始化，数据观察（`watch`）和事件/生命周期方法也尚未被设置。这意味着在这个阶段，组件实例还只是一个空壳，不能访问组件中的数据和方法。

主要用于一些初始的设置或者加载外部资源，不过由于数据和方法不可用，其应用场景相对较少。

2. Created

这个钩子在组件实例完成数据观测（`data observer`）和事件配置后被触发。此时，组件的`data`属性已经被初始化，可以访问和操作组件的数据和方法。

通常用于初始化数据、调用方法，是在组件创建阶段比较常用的钩子。

二、挂载阶段（BeforeMount、Mounted）

1. BeforeMount

在这个阶段，模板编译已经完成，但还没有将编译后的模板挂载到真实的 DOM 节点上。此时，`el`属性已经被解析，但虚拟 DOM（`v-node`）还没有渲染成真实的 DOM 元素。可以理解为，组件已经知道要挂载到哪里，但还没有进行实际的挂载操作。

这个钩子可以用于在挂载之前对 DOM 结构进行最后的调整或者添加一些自定义的属性。不过这种操作相对较少，因为大多数情况下，组件的 DOM 结构在模板阶段就已经确定。

2. Mounted

这是组件挂载完成后的钩子。此时，组件已经被渲染到真实的 DOM 中，可以通过`this.$el`访问组件的 DOM 元素。对于需要操作 DOM 元素的操作，如获取元素的高度、宽度，或者添加一些第三方 DOM-related 的插件，通常在这个钩子中进行。

三、更新阶段（BeforeUpdate、Updated）

1. BeforeUpdate

当组件的数据发生变化，即将重新渲染之前触发这个钩子。此时，组件的虚拟 DOM 已经重新生成，但还没有应用到真实的 DOM 上。可以在这个钩子中获取到变化前的 DOM 状态，对于一些需要在更新前记录状态或者进行特殊处理的情况很有用。

2. Updated

组件的 DOM 更新完成后触发这个钩子。此时，组件的虚拟 DOM 已经更新，并且对应的真实 DOM 也已经更新。不过需要注意的是，在这个钩子中避免进行会再次触发更新的操作，否则可能会导致无限循环更新。

可以用于在组件更新后执行一些依赖于 DOM 更新的操作，比如重新计算组件内元素的位置或者样式。在一个包含动画效果的组件中，当组件数据更新导致动画元素的属性变化时，可能在`Updated`钩子中启动或者调整动画效果。

四、销毁阶段（BeforeDestroy、Destroyed）

1. BeforeDestroy

在组件被销毁之前触发。此时，组件仍然完全可用，`data`、`methods`等仍然可以访问。这个钩子通常用于清理一些定时器、取消网络请求、移除事件监听器等操作，以避免内存泄漏。

2. Destroyed

组件销毁完成后触发。此时，组件的所有指令、事件监听器等都已经被移除，组件实例以及其相关的 DOM 元素（如果有的话）都已经从内存中被清除。这个钩子主要用于一些最后的清理工作或者日志记录。