vue的生命周期钩子函数 父子组件及缓存组件可以使用哪些函数

近期做vue的缓存等,路由比较复杂,认识了几个新的钩子函数,在此记录下

生命周期函数
  • beforeCreate --vue实例被创建之前(没有$el,没有$data)
  • created --vue实例创建完成,初始化data数据(没有$el,有$data)
  • beforeMount – 虚拟DOM,编译模板(没有$el,有$data)
  • mounted – 挂载编译后的html到对应位置,编译好的html替换虚拟DOM(有$el,有$data)
  • beforeUpdate --组件数据发生变化,更新前
  • updated --组件数据发生变化,更新后
  • beforeRouteEnter
  • beforeRouteLeave
  • activated
  • deactivated
  • beforeDestroy --组件实例销毁前
  • destroyed 实例销毁后,这个阶段解除实例对事件监听等的绑定,销毁钩子函数等

父子组件执行顺序
父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted

beforeMount和mounted函数执行在Vue实例挂载阶段,它们的调用时机是在mountComponent函数中。Vue组件在实例化的时候会先等待子组件的实例化完成,所以insertedVnodeQueue(保存组件的mounted钩子函数的数组)的添加顺序是先子后父

一、 组件间函数的关系
1. keep-alive下的组件
  • 有缓存的时候,组件渲染完一次,以后只执行deactivated,dedeactivated两个函数
  • 有缓存的时候,还执行beforeRouterEnter和beforeRouterLeave两个函数
2.兄弟组件
  • 当路由发生转变时,前一个组件执行beforeDestroy的时候,window.location.href已经变了后一个组件的location
3.父子组件
  • 路由变化的时候,正常组件会触发route和destroy的钩子
  • 子组件没有beforeRouteEnter、beforeRouteLeave
  • 子组件,父组件没有缓存的时候,路由变化用beforeDestroy,destroyed监控
  • 子组件,父组件有缓存的时候,路由变化用activated,deactivated监控
二、子路由和父路由缓存问题

1.父路由加了缓存,子路由没加缓存,子路由组件不缓存
2.父路由没加缓存,子路由加了缓存,当父路由改变时,子路由缓存失效,父路由不变时,子路由缓存生效

详解:https://blog.csdn.net/qq_34664239/article/details/89499120

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值