vue中的 keep-alive组件详解

keep-alive 组件是vue的一个内置组件，作用是当路由或者组件切换时，他会缓存住包裹在其中的组件或者页面的状态，而不是销毁掉，这样下次重新进入被包裹的路由页面时不会重新渲染dom二是从缓存中读取。
一般情况下会结合路由配置全局监控调整
例如可以在 app.vue中配置如下代码：

    <div id="app-warp" class="app-warp">
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive && isRouterAlive" />
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive && isRouterAlive" />
      </div>

这样可以针对要进入的路由的配置去决定是否使用keep-alive进行缓存整个路由页面
当页面路由配置中keepAlive为true时会使用 包裹的路由进行页面的缓存，否则使用未缓存的路由页面
路由配置如下：

  {
    path: '/路径',
    name: '名称',
    component: () => import('@/views/组件地址'),
    meta: {
      keepAlive: false,
      title: '标题',
    },
  },

使用keep-alive时需要注意，keep-alive提供了两个新的生命周期钩子函数：
activated：这个函数是用来替代created函数，当组件第一次渲染时或者每次keep-alive重新激活时都会被调用，要注意的是，组件第一次渲染时生命周期执行顺序是created-> mounted-> activated，之后keep-alive重新激活不在执行 created与mounted，只执行 activated
deactivated：当每次离开组件时这个函数会被调用，需要注意的是，如果有需要离开路由时进行相应的逻辑，正常的话会写在beforeRouteLeave函数中，但实际项目中会遇到beforeRouteLeave无法执行，建议在deactivated也进行一些判断

  activated() {
    // 读取上次计时时间，没有则至 0
    this.scanTime = sessionStorage.getItem(this.scantitle) ? Number(sessionStorage.getItem(this.scantitle)) : 0
    console.log('activated-浏览时间:', this.scanTime);
    if (!this.scanTimeCount) {
      this.timer()
    }
  },
  deactivated() {
    console.log('deactivated-浏览时间:', this.scanTime);
    this.clear()
    // 离开页面记住计时时间
    this.setScanTime()
  },

  beforeRouteLeave (to, from, next) {
    // 清除循环计时
    this.clear()
    // 离开页面记住计时时间
    this.setScanTime()
    next(vm => {
      console.log('beforeRouteLeave-scanTime:', vm.scanTime);
    });
  }

如有错误或不全欢迎评论区指正