zoukankan      html  css  js  c++  java
  • vue中keep-alive的使用

    在vue2.1.0版本后,keep-alive新加入了两个属性:include(包含的组件缓存生效)与exclude(排除的组件不缓存,优先级大于include)。

    include和exclude属性允许组件有条件的缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。(当使用正则或者是数组时,一定要使用v-bind)

    <!-- 逗号分隔字符串,只有组件a与b被缓存。这样使用场景变得更有意义了 -->
    <keep-alive include="a,b">
      <component :is="view"></component>
    </keep-alive>
    
    <!-- 正则表达式 (需要使用 v-bind,符合匹配规则的都会被缓存) -->
    <keep-alive :include="/a|b/">
      <component :is="view"></component>
    </keep-alive>
    
    <!-- Array (需要使用 v-bind,被包含的都会被缓存) -->
    <keep-alive :include="['a', 'b']">
      <component :is="view"></component>
    </keep-alive>

    有了include之后,再与router-view一起使用时便方便了许多了:

    <!-- 一个include解决了,不需要多写一个标签,也不需要在路由元中添加keepAlive了 -->
    <keep-alive include='a'>
        <router-view></router-view>
    </keeo-alive>

    需要注意的地方:

    1、<keep-alive>先匹配被包含组件的name字段,如果name不可用,则匹配当前组件components配置中的注册名称。

    2、<keep-alive>不会在函数式组件中正常工作,因为他们没有缓存实例。

    3、当匹配条件同时在include与exclude存在时,以exclude优先级最高

    4、包含在<keep-alive>中,但符合exclude,不会调用activated和deactivated。

  • 相关阅读:
    mac 终端 常用命令
    创办支持多种屏幕尺寸的Android应用
    java学习之部分笔记2
    java学习之部分笔记
    java学习之i/o
    java中String的用法
    java中List的用法
    java学习之Date的使用
    java学习之数据库
    C#中通过类来继承两个接口,父类实例化接口中的方法,子类继承父类,调用方法
  • 原文地址:https://www.cnblogs.com/chao202426/p/13219005.html
Copyright © 2011-2022 走看看