Vue.js 生命周期通俗解析-例如通过-挂载阶段在这一阶段组件开始挂载到DOM上

Vue.js 生命周期钩子函数通俗解析

一、实例初始化阶段

在这一阶段，Vue实例刚刚创建，组件的配置还没有完全完成。

beforeCreate

这时候，组件实例已经创建，但是还没有进行数据观测和事件配置。你可以在这里初始化一些非响应式的变量或进行一些配置工作，但是不能进行数据操作，因为数据还没有被观测。

created

这时候，实例已经完成数据观测和事件配置。你可以在这里进行数据初始化或获取数据，例如通过API请求获取数据并将其赋值给组件的 data 属性，也可以设置定时器、监听全局事件等操作。

二、挂载阶段

在这一阶段，组件开始挂载到DOM上。

beforeMount

这时候，相关的 render 函数首次被调用，但是虚拟 DOM 已经创建，但还没有挂载到实际的 DOM 上。所以，你可以在这里进行一些模板渲染之前的准备工作，但是不能进行 DOM 操作。

mounted

这时候，模板中的 DOM 已经被渲染到页面上。你可以在这里操作实际的 DOM 元素，例如获取元素尺寸、绑定事件等，也可以执行需要在 DOM 完全渲染后进行的任务。

三、数据更新阶段

在这一阶段，组件的数据发生变化，导致虚拟 DOM 重新渲染和打补丁。

beforeUpdate

这时候，数据更新之前调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这里进行一些处理，例如记录旧数据值，但是不能操作 DOM，因为虚拟 DOM 尚未更新。

updated

这时候，数据更新之后调用，虚拟 DOM 已经更新。你可以在这里对 DOM 进行操作，例如进行依赖于新 DOM 结构的后处理操作，例如滚动条调整等。

四、销毁阶段

在这一阶段，组件即将被销毁。

beforeDestroy

这时候，实例销毁之前调用。实例仍然完全可用，你可以在这里执行清理工作，例如清除定时器、取消全局事件监听等，也可以在组件销毁前保存状态或数据。

destroyed

这时候，实例销毁后调用。组件的所有绑定和事件监听器都已被解除，你可以执行最后的清理工作，例如移除 DOM 元素等，确保所有资源都已释放，不会造成内存泄漏。

Vue.js 提供了丰富的生命周期钩子函数，使得开发者可以在组件的不同阶段执行特定的逻辑。这些钩子函数帮助开发者更好地控制组件的行为和状态，从而构建出更高效、健壮的应用程序。

相关问答FAQs