keep-alive 组件级缓存

Posted yf-html

tags:

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

前言

      在Vue构建的单页面应用(SPA)中,路由模块一般使用vue-routervue-router不保存被切换组件的状态,

它进行push或者replace时,旧组件会被销毁,而新组件会被新建,走一遍完整的生命周期。

但有时候,我们有一些需求,比如跳转到详情页面时,需要保持列表页的滚动条的深度,等返回的时候依然在这个位置,这样可以提高用户体验。

在Vue中,对于这种“页面缓存”的需求,我们可以使用keep-alive组件来解决这个需求。

keep-alive

keep-alive是个抽象组件(或称为功能型组件),实际上不会被渲染在DOM树中。
它的作用是在内存中缓存组件(不让组件销毁),等到下次再渲染的时候,还会保持其中的所有状态,并且会触发activated钩子函数。
因为缓存的需要通常出现在页面切换时,所以常与router-view一起出现:
<keep-alive>
    <router-view />
</keep-alive>
可以使用keep-alive组件的include/exclude属性。
include属性表示要缓存的组件名(即组件定义时的name属性),
接收的类型为stringRegExpstring数组;
exclude属性有着相反的作用,匹配到的组件不会被缓存。
假如可能出现在同一router-view的N个页面中,我只想缓存列表页和详情页,那么可以这样写:
<keep-alive :include="[‘Home‘, ‘User‘]">
  <router-view />
</keep-alive>

vue实现前进刷新,后退不刷新

希望实现前进刷新、后退不刷新的效果。即加载过的界面能缓存起来(返回不用重新加载),关闭的界面能被销毁掉(再进入时重新加载)。

例如对a->b->c 前进(b,c)刷新,c->b->a 后退(b,a)不刷新

知道路由是前进还是后退就好了,

这样的话我就能在后退的时候让from路由的keepAlive置为false 

to路由的keepAlive置为ture,就能在再次前进时,重新加载之前这个keepAlive被置为false的路由了

但是這個需要集合鈎子函數來是實現

// App.vue

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

這個還是有爭議的。。。。

然後在一篇博客中看到用vux 來寫的,所以這邊也自己demo了下:

就是下面的代碼了:

 

实现条件缓存:全局的include数组

只需要将B动态地从include数组中增加/删除就行了

      在Vuex中定义一个全局的缓存数组,待传给include:

 

export default {
  namespaced: true,
  state: {
    keepAliveComponents: [] // 缓存数组
  },
  mutations: {
    keepAlive (state, component) {
      // 注:防止重复添加(当然也可以使用Set)
      !state.keepAliveComponents.includes(component) && 
        state.keepAliveComponents.push(component)
    },
    noKeepAlive (state, component) {
      const index = state.keepAliveComponents.indexOf(component)
      index !== -1 &&
        state.keepAliveComponents.splice(index, 1)
    }
  }
}

   在父页面中定义keep-alive,并传入全局的缓存数组:

// App.vue

<div class="app">
  <!--传入include数组-->
  <keep-alive :include="keepAliveComponents">
    <router-view></router-view>
  </keep-alive>
</div>

export default {
  computed: {
    ...mapState({
      keepAliveComponents: state => state.global.keepAliveComponents
    })
  }
}

 缓存:在路由配置页中,约定使用meta属性keepAlive,值为true表示组件需要缓存。

在全局路由钩子beforeEach中对该属性进行处理,这样一来,每次进入该组件,都进行缓存:

const router = new Router({
  routes: [
    {
      path: ‘/A/B‘,
      name: ‘B‘,
      component: B,
      meta: {
        title: ‘B页面‘,
        keepAlive: true // 这里指定B组件的缓存性
      }
    }
  ]
})

router.beforeEach((to, from, next) => {
  // 在路由全局钩子beforeEach中,根据keepAlive属性,统一设置页面的缓存性
  // 作用是每次进入该组件,就将它缓存
  if (to.meta.keepAlive) {
    store.commit(‘global/keepAlive‘, to.name)
  }
})

取消缓存的时机:对缓存组件使用路由的组件层钩子beforeRouteLeave

因为B->A->B时不需要缓存B,所以可以认为:当B的下一个页面不是C时取消B的缓存,那么下次进入B组件时B就是全新的:

export default {
  name: ‘B‘,
  created () {
      // ...设置滚动条在最顶部
  },
  beforeRouteLeave (to, from, next) {
    // 如果下一个页面不是详情页(C),则取消列表页(B)的缓存
    if (to.name !== ‘C‘) {
        this.$store.commit(‘global/noKeepAlive‘, from.name)
    }
    next()
  }
}

因为B的条件缓存,是B自己的职责,所以最好把该业务逻辑写在B的内部,而不是A中,这样不至于让组件之间的跳转关系变得混乱。

一个需要注意的细节:因为keep-alive组件的include数组操作的对象是组件名、而不是路由名,

因此我们定义每一个组件时,都要显式声明name属性,否则缓存不起作用。而且,一个显式的name对Vue devtools有提示作用。

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

缓存keep-alive

Vue 怎么缓存当前的组件?缓存后怎么更新?说说你对keep-alive的理解是啥

使用keep-alive实现组件页面缓存

keep-alive组件

keep-alive组件缓存

vue中keep-alive路由缓存