Vue生命周期

什么是 Vue 生命周期?

Vue 实例从创建到销毁的过程,就是生命周期。从开始创建、初始化数据、编译模板、挂载 DOM -> 渲染、更新 -> 渲染、销毁等一系列过程,称之为 Vue 的生命周期。

Vue 有几个生命周期,它们的作用主要是什么?

8 个,创建前/创建后、挂载前/挂载后、更新前/更新后、销毁前/销毁后。Vue生命周期的作用是方便我们通过它的生命周期,在业务代码中更好地操作数据,实现相关功能。

Vue生命周期详解过程

  • 创建前/后:在 beforeCreated 阶段,Vue 实例的挂载元素 e l 和 数 据 对 象 d a t a 以 及 事 件 还 未 初 始 化 。 在 c r e a t e d 阶 段 , V u e 实 例 的 数 据 对 象 d a t a 以 及 方 法 的 运 算 有 了 , el 和数据对象 data 以及事件还未初始化。在 created 阶段,Vue 实例的数据对象 data 以及方法的运算有了, eldatacreatedVuedatael 还没有。
  • 载入前/后:在 beforeMount 阶段,render 函数首次被调用,Vue 实例的 $el 和 data 都初始化了,但还是挂载在虚拟的 DOM 节点上。在 mounted 阶段,Vue 实例挂载到实际的 DOM 操作完成,一般在该过程进行 Ajax 交互。
  • 更新前/后:在数据更新之前调用,即发生在虚拟 DOM 重新渲染和打补丁之前,调用 beforeUpdate。在虚拟 DOM 重新渲染和打补丁之后,会触发 updated 方法。
  • 销毁前/后:在执行实例销毁之前调用 beforeDestory,此时实例仍然可以调用。在执行 destroy 方法后,对 data 的改变不会再触发周期函数,说明此时 Vue 实例已经解除了事件监听以及和 DOM 的绑定,但是 DOM 结构依然存在。beforeDestroy 钩子函数的执行时机是在 $destroy 函数执行最开始的地方,接着执行了一系列的销毁动作,包括从 parent 的 $children 中删掉自身,删除 watcher,当前渲染的 VNode 执行销毁钩子函数等,执行完毕后再调用 destroy 钩子函数。在 $destroy 的执行过程中,它又会执行 vm.patch(vm._vnode, null) 触发它子组件的销毁钩子函数,这样一层层的递归调用,所以 destroy 钩子函数执行顺序是先子后父,和 mounted 过程一样
  • activated 和 deactivated 钩子函数是专门为 keep-alive 组件定制的钩子

第一次页面加载会触发 Vue 哪几个钩子?

会触发 4 个生命钩子:创建前/创建后、挂载前/挂载后

DOM 渲染在哪个周期就已经完成?

在 beforeMounted 时它执行了 render 函数,对 $el 和 data 进行了初始化,但此时还是挂载到虚拟的 DOM 节点,然后它在 mounted 时就完成了 DOM 渲染,这时候我们一般还进行 Ajax 交互。

  • 26
    点赞
  • 92
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值