Vue 的 keep-alive 组件缓存

本文主要是介绍Vue 的 keep-alive 组件缓存，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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

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

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

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

 1 <!-- 逗号分隔字符串 -->
 2 <keep-alive include="a,b">
 3   <component :is="view"></component>
 4 </keep-alive>
 5 
 6 <!-- 正则表达式 (使用 `v-bind`) -->
 7 <keep-alive :include="/a|b/">
 8   <component :is="view"></component>
 9 </keep-alive>
10 
11 <!-- 数组 (使用 `v-bind`) -->
12 <keep-alive :include="['a', 'b']">
13   <component :is="view"></component>
14 </keep-alive>

条件缓存和控制缓存：

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

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

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

这篇关于Vue 的 keep-alive 组件缓存的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！