keep-alive

Vue keep-alive深入理解及实践总结

keep-alive处理嵌套深层级的路由方案

VUE生命周期

beforeCreate(){}在执行的时候,data还有methods都没有被初始化

created(){} data还有methods都被初始化好了,如果要调用 methods 方法或者操作 data 里面的数据,最早只能在 created 里面进行操作。

beforeMount(){} 表示模板已经在内存中编辑完成了,但是尚未渲染到模板页面中。即页面中的元素,没有被真正的替换过来,只是之前写的一些模板字符串。

mounted(){} 表示内存中模板已经真实的挂载到页面中去了,用户可以看到渲染好的界面了


注意这是一个生命周期函数的最后一个函数了,执行完这个函数表示 整个vue实例已经初始化完成了,组件脱离了创建阶段,进入运行阶段。

下面是运行期间的两个生命周期函数的钩子:

beforeUpdate(){} 表示我们的界面还没更新 但是data里面的数据是最新的。即页面尚未和最新的data里面的数据保持同步。

updated(){} 表示页面和data里面的数据已经包吃同步了 都是最新的。

beforeDestory(){} 当执行这个生命周期钩子的时候 vue的实例从运行阶段进入销毁阶段 此时实例身上的data 还有 methods处于可用的状态。

destoryed(){} 表示组件已经完全被销毁了 组件中所有的实例方法都是不能用了


被keep-alive包含的组件/路由中,会多出两个生命周期的钩子:activated 与 deactivated。

activated 和 deactivated 将会在树内的所有嵌套组件中触发。
activated在组件第一次渲染时会被调用,之后在每次缓存组件被激活时调用。

第一次进入缓存路由/组件,在mounted后面,beforeRouteEnter守卫传给 next 的回调函数之前调用:

beforeMount=> 如果你是从别的路由/组件进来(组件销毁destroyed/或离开缓存deactivated)=>mounted=> activated 进入缓存组件 => 执行 beforeRouteEnter回调

因为组件被缓存了,再次进入缓存路由/组件时,不会触发这些钩子:// beforeCreate created beforeMount mounted 都不会触发。

deactivated:组件被停用(离开路由)时调用