zoukankan      html  css  js  c++  java
  • keep-alive的作用

    keep-alive:主要用于保留组件状态避免重新渲染

    比如: 有一个列表页面和一个 详情页面,那么用户就会经常执行打开详情=>返回列表=>打开详情这样的话 列表 和 详情 都是一个频率很高的页面,那么就可以对列表组件使用<keep-alive></keep-alive>进行缓存,这样用户每次返回列表的时候,都能从缓存中快速渲染,而不是重新渲染

    1、属性:

    • include:字符串或正则表达式。只有匹配的组件会被缓存。

    • exclude:字符串或正则表达式。任何匹配的组件都不会被缓存。

    2、用法:

    包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 <transition>相似,<keep-alive>是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。

    <!-- 基本 -->
    <keep-alive>
      <component :is="view"></component>
    </keep-alive>
    
    <!-- 多个条件判断的子组件 -->
    <keep-alive>
      <comp-a v-if="a > 1"></comp-a>
      <comp-b v-else></comp-b>
    </keep-alive>
    
    <!-- 和 `<transition>` 一起使用 -->
    <transition>
      <keep-alive>
        <component :is="view"></component>
      </keep-alive>
    </transition>
    

    注意:<keep-alive>是用在其一个直属的子组件被开关的情形。如果你在其中有 v-for 则不会工作。如果有上述的多个条件性的子元素<keep-alive> 要求同时只有一个子元素被渲染。

    3、include 和 exclude 属性的使用:

    include 和 exclude 属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示:

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

    匹配首先检查组件自身的 name 选项,如果 name 选项不可用,则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。

  • 相关阅读:
    实现免费WiFi无线共享
    详解spring配置文件
    P1886 滑动窗口 /【模板】单调队列
    P3370 【模板】字符串哈希
    P3371 【模板】单源最短路径(弱化版)
    P3367 【模板】并查集
    P1177 【模板】快速排序
    P3382 【模板】三分法
    P3374 【模板】树状数组 1
    P1226 【模板】快速幂||取余运算
  • 原文地址:https://www.cnblogs.com/lvqiupingboke-2019/p/13100433.html
Copyright © 2011-2022 走看看