Vue 生命周期选项：2.x 与 3.x 的全面解析及案例分享一

目录

生命周期钩子介绍

Vue2.X生命周期

介绍

流程图

案例

this.$destroy

Vue3.X生命周期

介绍

流程图

案例

this.$nextTick

---

 非 VIP 用户能够免费下载博文资源

生命周期钩子介绍

---

        生命周期钩子，亦称为生命周期事件或生命周期函数。在 Vue 实例创建时，需历经一系列的初始化流程，例如设置数据监听、编译模板，将实例挂载至 DOM ，并且在数据发生变化时对 DOM 进行更新等操作。在此过程中，会执行一些被称作生命周期钩子的函数，这为用户提供了在不同阶段嵌入自身代码的契机。简而言之，从 Vue 实例的创建、运行直至销毁，始终伴随着林林总总的事件，而这些事件共同构成了生命周期。

        在 Vue 3.0 中，created() 和 mounted() 这两个生命周期钩子常被用于发送 Ajax 请求、启动定时器等异步任务。然而，需要注意的是，虽然 created() 阶段数据观测和属性已完成响应式绑定，但此时 DOM 尚未渲染，若涉及到对 DOM 的操作，应在 mounted() 中进行。

        此外，beforeCreate 钩子在实例初始化之前被调用，此时数据观测和事件配置尚未完成；beforeMount 钩子在挂载之前被调用，相关的 render 函数首次被调用；beforeUpdate 钩子在数据更新时调用，发生在虚拟 DOM 打补丁之前；updated 钩子由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用；beforeUnmount 钩子在组件卸载之前调用；unmounted 钩子在组件卸载完成时调用。

        这些生命周期钩子的存在，使得开发者能够更加精细地控制组件的行为和逻辑，从而构建出更加健壮和高效的应用程序。

Vue2.X生命周期

---

介绍

        在 Vue 2.0 中，生命周期函数是在组件创建、更新和销毁的不同阶段自动触发的函数，允许开发者在特定时刻执行自定义的逻辑。

        beforeCreate：在实例初始化之后，数据观测和事件配置之前被调用。此时无法访问到 data 中的数据和 methods 中的方法。

        created：实例创建完成，数据观测、属性和方法的运算、事件回调等已完成。可以访问到 data 中的数据，但尚未挂载到 DOM，$el 属性不可见。

        beforeMount：在挂载开始之前被调用，模板已在内存中编译好，但尚未挂载到页面。

        mounted：实例挂载完成，模板已渲染到页面，可进行 DOM 操作。可以使用 this.$nextTick 确保在整个视图渲染完毕后执行某些操作。

         beforeUpdate：数据更新时，虚拟 DOM 重新渲染和打补丁之前调用。