目录
非 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 重新渲染和打补丁之前调用。