Vue关于 keep-alive的一些用法以及采坑记录

 <keep-alive>  可以对不同的组件进行缓存

      keep-alive是Vue提供的一个抽象组件，用来对组件进行缓存，从而节省性能，由于是一       个抽象组件，所以在页面渲染完毕后不会被渲染成一个DOM元素

 

<keep-alive>生命周期

      activated：页面第一次进入的时候，钩子触发的顺序是created->mounted->activated

      deactivated ：页面退出的时候会触发deactivated，当再次前进或者后退的时候只触发          activated

 

一、<keep-alive>的使用

1、利用meta属性

App.vue中(根据不同的组件设置是否需要被缓存)

 <keep-alive>
      <router-view v-if="$route.meta.keepAlive" />
    </keep-alive>

    <router-view v-if="!$route.meta.keepAlive" />

router/index.js里（给不同的组件添加keepAlive属性是否需要被缓存  true表示会   false表示不需要被缓存）

 

2、利用include、exclude属性   （注意是组件名）

 

<keep-alive include="keepalive1,keepalive2,keepalive3" exclude="keepalive4">
      <router-view></router-view>
</keep-alive>

 

3、动态设置   (动态的去更改value的值)

<keep-alive :include="value" :exclude="value1">
      <router-view></router-view>
</keep-alive>

 

 

二、注意点-----踩坑记录

设置了<keep-alive>的组件之后 生命周期beforeDestroy ()  、 destroyed() 不会执行

1、 created() {},   //只执行一次   之后不会再被执行 可以用activated()代替

2、beforeDestroy() 、destroyed() 不会执行   可以用deactivated()代替

3、可以在beforeRouteLeave(to, from, next)生命周期去监听路由离开时做相应的逻辑动态的去更改下个页面时否要被缓存

from.meta.keepAlive = false;  
from.meta.keepAlive = true;

4、watch里监听路由的变话在其他页面也会执行里面的代码

watch: {
    //设置了缓存的路由  在其他页面也会触发改事件
    $route(to, from) {
      console.log('路由发生了改变')
      console.log(to.path);
      console.log(from.path);
    }
  },

 

 

三、强制清空设置了keepalive组件的缓存

keepalive设置了缓存是没办法一次性删除多个页面的缓存   于是只能强制性的删除

下面的方法只能在设置了缓存的页面清除   因为没有设置缓存的组件里没有this.$vnode.parent的值可能是undefined 

往下面根本可能找不到componentInstance属性值

beforeRouteLeave(to, from, next) {
    if (to.path == "/keepalive4") {
      //清空前面keep-alive设置的所有缓存   下面的代码只有在设置了缓存的页面才会有效
      this.$vnode.parent.componentInstance.cache = {};
      this.$vnode.parent.componentInstance.keys = [];
    }

    next();
  }