8

• beforeCreate：在 new 一个 vue 实例后，只有一些默认的生命周期钩子和默认事件，其他的东西都还没创建。
• created：data 和 methods 都已经被初始化好了。（如果要调用 methods 中的方法，或者操作 data 中的数据，最早可以在这个阶段中操作）
• beforeMount：在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的。
• mounted：Vue 实例已经初始化完成了。此时组件脱离了创建阶段，进入到了运行阶段。 （如果我们想要通过插件操作页面上的 DOM 节点，最早可以在和这个阶段中进行）
• beforeUpdate：页面中的显示的数据还是旧的，data 中的数据是更新后的， 页面还没有和最新的数据保持同步。
• updated：页面显示的数据和 data 中的数据已经保持同步了，都是最新的。
• beforeDestroy：Vue 实例从运行阶段进入到了销毁阶段，这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于可用状态。还没有真正被销毁。
• destroyed：这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于不可用状态。组件已经被销毁了。

11

11

10吧

8

1. 初始化阶段 beforeCreate、created、beforeMount、mounted
2. 更新阶段 beforeUpdate、updated
3. 销毁阶段 beforeDestroy destroyed

Vue生命周期的作用是在组件的不同阶段执行相应的钩子函数，从而允许开发者在关键时刻添加自定义的逻辑或进行相关操作。生命周期钩子函数提供了一种控制组件行为的方式，让开发者可以在组件的不同生命周期阶段进行初始化、更新数据、监听事件、执行异步操作等。
8

以下是Vue的生命周期钩子函数及其作用：

beforeCreate：

在实例创建之前调用。
适用于执行一些初始化任务、设置组件状态或引入插件等操作。
created：

在实例创建之后调用。
适用于执行异步操作、请求数据、监听事件或对数据进行初始化操作。
beforeMount：

在组件挂载到DOM之前调用。
适用于进行一些DOM操作或准备组件渲染的数据。
mounted：

在组件挂载到DOM之后调用。
适用于执行一些需要DOM的操作、初始化第三方库、发送网络请求或启动定时器等。
beforeUpdate：

在组件更新之前调用，即响应式数据发生变化但DOM尚未更新。
适用于在更新之前进行准备工作、检查数据变化或进行异步操作。
updated：

在组件更新完成之后调用，即DOM已经更新。
适用于执行一些需要DOM的操作、更新第三方库或与其他组件进行交互等。
beforeUnmount：

在组件卸载之前调用。
适用于执行一些清理操作、取消订阅、移除事件监听器或释放资源等。
unmounted：

在组件卸载之后调用。
适用于执行最后的清理操作、销毁定时器或解除绑定等。
生命周期钩子函数使开发者能够在组件的不同阶段进行处理，控制组件的行为和数据的更新。通过合理使用生命周期钩子函数，可以实现更精确的控制和交互，优化组件性能，并处理组件的初始化、更新和销毁等方面的逻辑。