缓存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属性为bookLists，bookLists的组件会被缓存，其它组件不会被缓存
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的主要内容，如果未能解决你的问题，请参考以下文章