vue keep-alive讲解

Posted liyunlonggg

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue keep-alive讲解相关的知识,希望对你有一定的参考价值。

keep-alive

作用

keep-alive是Vue提供给我们一个内置组件,

作用:保存我们路由切换时组件的状态 , 比如列表页面进入详情,我们想保存列表滚动的位置,我们就可以使用keep-alive保存列表页面的滚动位置。

组件使用keep-alive以后会新增两个生命周期 actived() deactived(),

有两个参数 include - 包裹的组件名会被缓存

​ exclude 包裹的组件名都不会被缓存
keep-alivetransition相似,只是一个抽象组件,它不会在DOM树中渲染(真实或者虚拟都不会),也不在父组件链中存在,比如:你永远在 this.$parent 中找不到 keep-alive

常见用法
  • 全局
<keep-alive><router-view></router-view></keep-alive>
  • 局部
// 这是目前用的比较多的方式
<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

router设置

... 
  routes: [
     path: '/', redirect: '/index',  component: Index, meta:  keepAlive: true ,
    
      path: '/common',
      component: TestParent,
      children: [
         path: '/test2', component: Test2, meta:  keepAlive: true   
      ]
    
    ....
    // 表示index和test2都使用keep-alive
  • 新增属性inlcude/exclude
<!-- comma-delimited string -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>
<!-- regex (use v-bind) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

//其中a,b是组件的name

注意:这种方法都是预先知道组件的名称的

  • 动态判断
<keep-alive :include="includedComponents">
  <router-view></router-view>
</keep-alive>

includedComponents动态设置即可

watch: 
    //使用watch 监听$router的变化
    $route(to, from) 
      //如果to索引大于from索引,判断为前进状态,反之则为后退状态
      if (to.meta.index > from.meta.index) 
        //设置动画名称
        this.transitionName = "slide-left";
       else 
        this.transitionName = "slide-right";
      
    ,
  ,

以上是关于vue keep-alive讲解的主要内容,如果未能解决你的问题,请参考以下文章

Vue中keep-alive原理

在 React 中实现 keep alive

在 React 中实现 keep alive

vue keep-alive 实现详情返回列表保留页面数据

vue中keep-alive的作用

Vue用keep-alive缓存组件