zoukankan      html  css  js  c++  java
  • vue-keep-alive介绍

      下面所讲是针对Vue2.x,据说keep-alive的用法在Vue3.x已经出现变化了,以及生命周期方法destroyed等周期方法也更名了,所以下面的演示是居于2.x的

      跳转到父路由对应的组件时,子路由对应组件是可以不显示出来的。但跳转到子路由对应的组件,父路由对应的组件是会显示出来的,这点要记住。

      在默认情况下,路由之间的切换会导致组件的切换,组件的切换会意味着,切换前的组件是会被摧毁掉,因此每次切换都会伴随着一个新组件的创建和旧组件的消亡;但有很多时候我们并不希望旧组件在切换时被摧毁,而是一直保持状态,保持生命周期,那这样的话 keep-alive就能起到作用了

      keep-alive是Vue已经内置的组件,不需要再次安装可直接使用,使用的方法比较简单,直接用keep-alive标签包裹router-view即可,这样的话router-view所展示的组件都会被缓存下来,即保持他们的生命状态,如下:

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

       但要注意一点:router-view展示的组件会被缓存下来,如果该组件有子组件的话,子组件是不会被缓存下来的,也就是子组件会被正常摧毁掉。想要子组件不被摧毁掉,很简单,只要在父组件中再加上keep-alive即可。

      然后keep-alive也有一些属性,比如下面:

       举个例子:

        <keep-alive exclude="组件名或正则表达式">
          <router-view></router-view>
        </keep-alive>

      然后再看下Vue3.x的keepalive用法:

        <router-view v-slot="{ Component }">
          <keep-alive>
            <component :is="Component"></component>
          </keep-alive>
        </router-view>

      Component代表当前展示的组件

  • 相关阅读:
    洛谷1012 拼数
    洛谷1012 拼数
    洛谷 1155 (NOIp2008)双栈排序——仔细分析不合法的条件
    bzoj 3566 [SHOI2014]概率充电器——树型
    bzoj 1415 [Noi2005]聪聪和可可——其实无环的图上概率
    洛谷 1291 [SHOI2002]百事世界杯之旅
    洛谷 1365 WJMZBMR打osu! / Easy
    洛谷 1297 [国家集训队]单选错位——期望
    洛谷 1099 ( bzoj 1999 ) [Noip2007]Core树网的核
    洛谷 2827 蚯蚓——相邻两个比较的分析
  • 原文地址:https://www.cnblogs.com/ibcdwx/p/14609850.html
Copyright © 2011-2022 走看看