keep-alive详解

2019-05-19  本文已影响0人  叶叶叶xxx

<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>

上一篇下一篇

猜你喜欢

热点阅读