首页 > 其他 > 详细

keep-alive缓存组件,操作之后需要重新获取数据--activated

时间:2020-12-02 23:13:27      阅读:127      评论:0      收藏:0      [点我收藏+]

应用场景:

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!