vue中设置动态缓存keep-alive

场景：如下图，有一个页面基本加载一次后都是不更新的，但是其中的状态会更新（即下图红色框中的状态）。需求就是状态不更新的时候缓存页面，监测到状态更新后，先更新内容，再次进行页面缓存，以此类推。

场景图

方案一：（不！可！行！）

   思路：在路由元信息中添加一个keepAlive变量，然后根据监测的状态变化动态修改keepAlive变量的值，来达到动态缓存页面。

  结论：经验证，此方法不可行。因为缓存创建后会存在vue的内存中。而动态修改keepAlive变量并不会销毁以及重新创建，因为keep-alive会将组件保存在内存中，而缓存的组件还是一开始创建在内存中的那个，并不因为变量而改变。
  而在缓存周期中activated()钩子函数，只会更新数据，不会跟新页面。

方案二：（ok）

  思路：使用中的属性include，include允许组件有条件地缓存。然后动态修改include值即可。因为组件的实现原理（从源码角度）看，其中有一个watch监听。监视include和exclude，在被修改的时候对cache进行修正。不符合条件的，销毁vnode对应的实例组件，并从cache中移除。

cached：全局变量

data(){
   return{
        cached:this.$store.state.cacheArr,
   }
}    

路由发生变化时，重新获取cached，可根据实际需求进行调整，变更

   watch:{
      $route:{ //监听路由变化
        handler:function (to,from) {
          this.cached=this.$store.state.cacheArr;
        }
      }
    },

附

  包裹动态组件的时候，会缓存不活动的组件实例，而不是销毁它们。需要注意的是，是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件中。
  注！意！是用在其一个直属的子组件被开关的情景，需要配合使用。如果你在其中有v-for则不会工作。如果有上述的多个条件性的子元素，要求同时只有一个子元素被渲染。

参考：https://blog.csdn.net/github_36546211/article/details/78517496