应用场景:
1 从列表页 -> 详情页 -> 列表页时,要保持列表页在原来的页面
<keep-alive>
<router-view v-if="$route.meta.keepAlive"/>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"/>
2 当对列表页的数据做修改 | 新增操作时,返回到列表页时,要重新获取页面数据
activated() {
this.searchList();
},
3 < keep-alive > 中创建的组件,会多出两个生命周期的钩子: activated 与 deactivated
3.1 activated在缓存组件激活时调用;
3.2 deactivated在缓存组件失活时调用
tip:001 只有组件被 keep-alive 包裹时,这两个生命周期才会被调用;
002 如果作为正常组件使用,是不会被调用;
003 使用 exclude 排除之后,就算被包裹在 keep-alive中,这两个钩子依然不会被调用;
004 另外在服务端渲染时此钩子也不会被调用的。
keep-alive缓存组件,操作之后需要重新获取数据--activated
原文:https://www.cnblogs.com/pleaseAnswer/p/14076396.html