vue生命周期回顾
我们都知道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
道理其实也很简单,就是父组件中执行子组件的时候才会触发子组件的生命周期函数