缓存keep-alive

Posted mijiujs

tags:

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

keep-alive缓存

如果没有缓存,每点击一次导航,内容区就会创建一个组件,该组件会经历整个生命周期,每点击一次,就会创建一个组件,比较浪费性能,这时,我们就要考虑到是否能将点击过的已创建的组件进行缓存,当再次点击已访问过的组件时,这时,就会从缓存中获取该组件,而不会重新创建,这就用到keep-alive。

 

keep-alive 标签包裹component组件标签

<keep-alive :include="whiteList" :exclude="blackList" :max="amount">

  <component :is="currentComponent"></component>

</keep-alive>

在vue-router中的应用

<keep-alive :include="whiteList" :exclude="blackList" :max="amount">

  <router-view></router-view>

</keep-alive>

include定义缓存白名单,keep-alive会缓存命中的组件;exclude定义缓存黑名单,被命中的组件将不会被缓存;max定义缓存组件上限,超出上限使用LRU的策略置换缓存数据。

 

Activated、deactivated

keep-alive对应两个生命周期:activated、deactivated

activated(){

    console.log("活跃状态");

}

deactivated(){

    console.log("缓存状态")

}

 

当从缓存中读取a组件时,此时a组件处于活跃状态,

当从缓存中读取b组件时,a组件处于缓存状态,此时b组件处于活跃状态,

 

用途:

当在a组件浏览小说到某个位置,这时,我切换到b组件,那么就用a组件的缓存状态函数记录这个位置(),
当我再次切换到a组件,用活跃状态函数保存到该位置

 

include、exclude

include属性表示只有name属性为bookListsbookLists的组件会被缓存,其它组件不会被缓存
exclude属性表示除了name属性为indexLists的组件不会被缓存,其它组件都会被缓存

<keep-alive include="bookLists,bookLists">

      <router-view></router-view>

</keep-alive>

<keep-alive exclude="indexLists">

      <router-view></router-view>

</keep-alive>

 

注意:name是组件的名字,而不是路由的名字

如一个vue文件

<template>...</template>

<script>

export default {

  name”bookLists”,

  data:(){

    return {}

}

}

</script>

利用meta属性

router.js路由设置该属性

    {

      path: ‘/about‘,

      name: ‘about‘,

      component: () => import(/* webpackChunkName: "about" */ ‘./views/About.vue‘),

      meta: {

        keepAlive: true // 需要被缓存的组件

      }

    },

    {

      path: ‘/vuexTry‘,

      component: () => import(‘./views/vuexTry.vue‘),

      meta: {

        keepAlive: false // 不需要被缓存的组件

      }

    }

 

<keep-alive>

  <router-view v-if="this.$route.meat.keepAlive"></router-view>

  <!--这里是会被缓存的组件-->

</keep-alive>

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

vue 缓存组件keep-alive

vue中keep-alive路由缓存

keep-alive

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

vue 路由缓存 keep-alive include和exclude无效

vue 路由缓存 keep-alive include和exclude无效