vue中的 keep-alive组件详解

·  阅读 281

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);
    });
  }
复制代码

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

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改