官方解释:
& lt; keep-alive>包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们和& lt; transition>相似,& lt; keep-alive>是一个抽象组件:它自身不会渲染一个DOM元素,也不会出现在组件的父组件链中。
当组件在& lt; keep-alive>内被切换,它的激活和不激活这两个生命周期钩子函数将会被对应执行。
主要用于保留组件状态或避免重新渲染。
维生是Vue的内置组件,在组件切换过程中将状态保留在内存中,等再次访问的时候,还保持着离开之前的所有状态,而不是重新初始化。也就是所谓的组件缓存。
我们知道,使用路由vue-router切换组件的时候是不保存状态的,它进行router.push()或router.push()或router.replace()的时候,旧组件会被销毁,新组件会被新建,然后走一遍完整的生命周期,所以缓存经常与router-view一起出现:
被包含在点火电极中创建的组件,会多出两个生命周期的钩子:激活与释放:
1。激活:在点火电极组件激活时调用
2。停用:在点火电极组件停用时调用
注意:只有组件被维生包裹时,这两个生命周期函数才会被调用。这两个钩子在服务器端渲染期间不被调用。
<强>应用场景:
官网有一个多标签界面的例子,介绍的还是蛮详细的。
我们在实际开发项目中会有一些需求,比如跳转到详情页面时,需要保持列表页的滚动条的位置,返回的时候依然在这个位置,这样可以提高用户体验,这个时候就可以使用缓存组件点火电极来解决。
设置了点火电极缓存的组件,会多出两个生命周期钩子:
- <李>首次进入组件时:beforeRouteEnter祝辞beforeCreate祝辞在创建安装在激活比;……比;beforeRouteLeave祝辞李停用李 <>再次进入组件时:beforeRouteEnter祝辞激活比;……比;beforeRouteLeave祝辞李停用
可以看到,缓存的组件中激活钩子函数每次都会触发,所以可以通过这个钩子判断,当前组件时需要使用缓存的数据还是重新调用接口加载数据。如果未使用点火电极组件,则在页面回退时会重新渲染页面,首次进入组件的一系列生命周期也会一一被触发。
离开组件时,使用了点火电极不会调用beforeDestroy和摧毁钩子,因为组件没被销毁,被缓存起来了。所以释放这个钩子可以看作是beforeDestroy和摧毁的代替,缓存组件销毁的时候要做的一些操作可以放在这个里面。
<强>需求案例
最近项目中碰到需要缓存的场景,主要还是列表页到详情页的跳转,但列表页存在多级关系,具体需求如下:
初次进入此页面,默认展示左侧的树形结构菜单,点击某一菜单,右侧加载该菜单相应的数据列表,由列表进入详情内页,然后再返回该页面,希望该页面保留了用户之前选择的树形菜单及数据列表。若从其他页面进入此页面,则不需要缓存。
思路:结合路由器中设置元信息,缓存列表页。
1。设置路由的元信息
常量列表=()=比;进口(/* webpackChunkName:“list"*/& # 39;. ./页面/List.vue& # 39;)
const细节=()=比;进口(/* webpackChunkName:“detail"*/& # 39;. ./页面/Detail.vue& # 39;)
｛
路径:& # 39;列表# 39;
名称:& # 39;列表# 39;
组件:列表,
元:{
标题:& # 39;列表& # 39;,
keepAlive:真的,//需要缓存
isKeep:假
}
},
｛
路径:& # 39;经销# 39;
名称:& # 39;细节# 39;
组件:细节
} 2。修改渲染匹配视图组件router-view(一般是app.vue文件,根据实际需求会不一样)
也可以使用点火电极组件的包括/排除属性,包括表示要缓存的组件名(定义时的名字属性),而排除相反,匹配到的组件不会被缓存。
