美文网首页
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