vue生命周期以及父子组件生命周期,多组件与keep-alive交叉生命周期(1)

132 阅读2分钟

vue生命周期回顾

109951165523325949.jpg

我们都知道vue生命周期有这样几个:

生命周期中我们可以通过钩子函数进行回调,那么如果我们不进行回调,生命周期函数当然不会进行执行,生命周期函数给了用户在不同阶段添加自己的代码的机会,

所有的生命周期的this将自动绑定到上下文的实例对象中,所以我们可以直接用this来访问data,methods等,不能这样:created:()=>{console.log(this.a)} ,因为这样this会绑定父级上下文,所以不会指向当前的组件实例,当然vue也不允许我们这样写,如果这样写的话会报错

ps:那么created这些函数的父级上下文是啥呢,笔者思考是vue实例对象的某个属性,但是有待验证,大家有知道的可以写在下面的评论区

  • beforecreate 在这期间既没有数据挂载,也没有根节点,那么这个生命周期是用来干什么的呢
  • created 在这之后vue对象的数据被加载进来
  • beforemount 相关的render函数首次被调用,这一阶段有数据,但是没有根节点
  • mounted 实例被挂载
  • beforeupdate 数据发生改变后,DOM 被更新之前被调用,当然dom还没有被更新
  • updated 在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用,dom已经更新
  • actived 在keep-alive缓存的组件激活时候调用
  • deactived 在离开被keep-alive缓存的组件时候调用
  • beforeDestory 实例销毁之前调用。在这一步,实例仍然完全可用
  • destoryed 实例销毁后调用
以上就是对vue2生命周期的一些简单回顾

除此之外,不知道大家有没有想过父子组件之间生命周期的调用顺序问题,父子组件之间生命周期的调用顺序是这样的:

父子子组件初始化时:

父beforecreate => 父created => 父beforemount => 子beforecreate => 子created => 子beforemount => 子mounted => 父mounted

父子组件数据更新时:

父beforeupdate => 子beforeupdate => 子updated => 父updated

父子组件销毁时:

父beforedestory => 子beforeDestory => 子destoryed => 父destoryed

道理其实也很简单,就是父组件中执行子组件的时候才会触发子组件的生命周期函数

ps:写在后面,如果有什么地方出错,还请大家指正,欢迎大家浏览连载知识
2022.08.15 写在阴雨天 wxb

109951165523326964.jpg