美文网首页
keep-alive详解

keep-alive详解

作者: 叶叶叶xxx | 来源:发表于2019-05-19 16:47 被阅读0次

<keep-alive></keep-alive>
如果把切换出去的组件保留在内存中,可以保留它的状态或避免重新渲染。也不会重新请求数据,为此可以添加一个 keep-alive 指令参数:
include 和 exclude 属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示:
include - 字符串或正则表达式。只有匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何匹配的组件都不会被缓存。

<keep-alive>
  <component :is="currentView">
    <!-- 非活动组件将被缓存! -->
  </component>
</keep-alive>
--------------------------------------------------------------

实例:

  <keep-alive>
      <router-view></router-view>
  </keep-alive>

---------------------------------------------------------------

新增:

<!-- 逗号分隔字符串 -->
<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>

相关文章

网友评论

      本文标题:keep-alive详解

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