keep-alive
<keep-alive>
包裹动态组件的时候,会缓存不活动的组件实例,而不是摧毁他们。其是一个抽象的组件,自身不会渲染一个DOM元素,也不会出现在父组件链中。
简而言之,被<keep-alive>
包裹的组件会被缓存。
props
- include - 字符串或正则表达,只有匹配的组件会被缓存
- exclude - 字符串或正则表达式,任何匹配的组件都不会被缓存
Demo
// name为test的组件将被缓存
<keep-alive include="test">
<router-view><router-view/>
</keep-alive>
// 除了name为test的组件都将被缓存
<keep-alive exclude="test">
<router-view><router-view/>
</keep-alive>
<keep-alive>
上手使用其实没什么难度,我一把梭完成了项目需求,正当我得意之时,测试大佬给我泼了盆凉水。因为test被缓存了,导致该页面数据不能同步刷新。
想了半天没想到好的解决方案,于是问了下万能的搜索引,发现了activated这个生命周期钩子。
activated
先说下这个生命周期钩子,官网介绍是其被keep-alive缓存的组件激活时调用;在服务器端渲染期间不被调用。
说白了其就是在挂载后和更新前被调用的。但如果该组件中没有使用缓存,也就是没有被<keep-alive>
包裹的话,activated是不起作用的。
所以当我们运用了组件缓存时,如果想每次切换都发送一次请求的话,需要把请求函数写在activated中,而写在created或mounted中其只会在首次加载该组件的时候起作用。
Demo
activated() {
// 每次进入更新数据
this.getData()
}