Vue 的 keep-alive 组件缓存

Vue中项目当在多个组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题

 

但是keep-alive也会带来一些负面影响，列如某些组件依赖钩子函数来更新，如果对其进行组件缓存，便会导致钩子函数不会触发

还有存在一些组件并不需要缓存

include 和 exclude   prop 允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示：

 

<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

 

 

条件缓存和控制缓存：

我们可以在vuex中新建数组来保存需要缓存的页面，搞俩个添加缓存和移除缓存的方法修改数组来达到有需要有条件的控制缓存。

在具体需要的代码中移除缓存，并在钩子函数中重新添加缓存来达到这样一个效果。

 

 

 

 

ps:在 2.2.0 及其更高版本中，activated 和 deactivated 将会在 <keep-alive> 树内的所有嵌套组件中触发。