近期做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