美文网首页
浅谈keep-alive(一)

浅谈keep-alive(一)

作者: 萤火驻守心间 | 来源:发表于2022-04-19 17:51 被阅读0次

keep-alive是 Vue 内置的一个组件,可避免重新渲染。
include:包含的组件缓存。
exclude:排除的组件不缓存,优先级大于include。
使用方法

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

include: 字符串或正则表达式,只有名称匹配的组件会被缓存exclude:字符串或正则表达式,任何名称匹配的组件都不会被缓存include 和 exclude 的属性允许组件有条件地缓存。
使用示例

<!-- 逗号分隔字符串,只有组件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>

相关文章

网友评论

      本文标题:浅谈keep-alive(一)

      本文链接:https://www.haomeiwen.com/subject/qrteertx.html