Vue的生命周期是什么

vue 实例有⼀个完整的⽣命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom ->渲染、更新 ->
渲染、卸载等⼀系列过程,即vue实例从创建到销毁的过程,我们称这是vue的⽣命周期

在这里插入图片描述

生命周期经历的阶段和钩子函数

创建前/后:

beforecreate阶段:
在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。此时vue(组件)对象被创建了,但是vue对象的属性还没有绑定,如data属性,computed属性还没有绑定,即没有值.此时还没有数据和真实DOM。
即:属性还没有赋值,也没有动态创建template属性对应的HTML元素(二阶段的createUI函数还没有执行)之后挂载数据(属性赋值)包括 属性和computed的运算,
created阶段:
vue对象的属性有值了,但是DOM还没有生成。此时有数据了,但是还没有真实的DOM即:data,computed都执行了。属性已经赋值,但没有动态创建template属性对应的HTML元素,所以,此时如果更改数据不会触发updated函数。
如果:数据的初始值就来自于后端,可以发送ajax,或者fetch请求获取数据,但是,此时不会触发updated函数

检查
1)检查是否有el属性
检查vue配置,即new Vue{}里面的el项是否存在,有就继续检查template项。没有则等到手动绑定调用vm.mount(),完成了全局变量el的绑定。
2)检查是否有template属性:
检查配置中的template项,如果没有template进行填充被绑定区域,则被绑定区域的el对象的outerHTML都作为被填充对象替换掉填充区域,即如果vue对象中有 template属性,那么,template后面的HTML会替换’el’对应的内容。如果有render属性,那么render就会替换template。(优先关系时: render > template > el)

载入前/后:

beforeMount 阶段:
vue 实例的el 和 data 都初始化了,但还是挂载之前为 虚拟的 dom 节点,data.message 还未替换。模板编译(template)、数据挂载(把数据显示在模板里)之前执行的钩子函数此时 this.$el有值,但是数据还没有挂载到页面上。即此时页面中的{{}}里的变量还没有被数据替换。然后进行模板编译:用vue对象的数据(属性)替换模板中的内容
mounted 阶段:
vue 实例挂载完data.message 成功渲染。模板编译完成,数据挂载完毕即:此时已经把数据挂载到了页面上,所以,页面上能够看到正确的数据了。一般来说,我们在此处发送异步请求(ajax,fetch,axios等),获取服务器上的数据,显示在DOM里

更新前/后:

当 data 变化时,会触发 beforeUpdate 和 updated 方法。
beforeUpdate阶段:
组件更新之前执行的函数,只有数据更新后,才能调用(触发)beforeUpdate,注意:此数据一定是在模板上出现的数据,否则,不会,也没有必要触发组件更新(因为数据不出现在模板里,就没有必要再次渲染)。数据更新了,但是vue(组件)对象对应的dom中的内部(innerHTML)没有变,所以叫作组件更新前
updated阶段:
对数据统一处理的方法函数,在这一阶段DOM会和更改过的内容同步。

销毁前/后:

在执行 destroy 方法后,对 data 的改变不会再触发周期函数,说明此时 vue 实例已经解除了事件监听以及和 dom 的绑定,但是 dom 结构依然存在。
beforeDestroy阶段:
vue(组件)对象销毁之前,在这一步,实例仍然完全可以调用。
destroyed阶段:
在实例被销毁之后调用,此时 vue 实例指示的所有东西都会解绑,所有的事件监听器会被移除,所有的子实例也会被销毁。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值