28
2020
04

对keep-alive 的了解?

keep-alive是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。

在vue 2.1.0 版本之后,keep-alive新加入了两个属性: include(包含的组件缓存) 与 exclude(排除的组件不缓存,优先级大于include) 。


使用方法


<keep-alive include='include_components' exclude='exclude_components'>

  <component>

    <!-- 该组件是否缓存取决于include和exclude属性 -->

  </component>

</keep-alive>

参数解释

include - 字符串或正则表达式,只有名称匹配的组件会被缓存

exclude - 字符串或正则表达式,任何名称匹配的组件都不会被缓存

include 和 exclude 的属性允许组件有条件地缓存。二者都可以用“,”分隔字符串、正则表达式、数组。当使用正则或者是数组时,要记得使用v-bind 。


使用示例


<!-- 逗号分隔字符串,只有组件a与b被缓存。 -->

<keep-alive include="a,b">

  <component></component>

</keep-alive>


<!-- 正则表达式 (需要使用 v-bind,符合匹配规则的都会被缓存) -->

<keep-alive :include="/a|b/">

  <component></component>

</keep-alive>


<!-- Array (需要使用 v-bind,被包含的都会被缓存) -->

<keep-alive :include="['a', 'b']">

  <component></component>

</keep-alive>

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。