vue keep-alive 动态清除缓存

239 阅读1分钟

我们一般用keep-alive 来管理页面缓存,但如果缓存页面太多,内存得不到释放也很容易造成页面的卡顿。下面有几种方法可以清除页面缓存,可以按照自己需求进行筛选:

include,exclude 动态控制缓存

可以通过 includeexclude 属性或手动控制缓存来管理缓存的组件。

要手动清除某些缓存页面,可以通过以下方法来实现:

<keep-alive :include="cachedComponents">
  <router-view />
</keep-alive>

cachedComponents 是一个数组,包含你想缓存的组件名称。当你不想再缓存某些组件时,只需要从这个数组中移除它们即可。

使用 max 限制缓存数量

可以通过 max 属性设置 keep-alive 的最大缓存数量,超过这个数量时,Vue 会自动删除最久未使用的组件缓存。

<keep-alive :max="10">
  <router-view />
</keep-alive>