vue中keep-alive实现页面缓存
keep-alive
- props:
include- 字符串或者正则表达式。只有名称匹配的组件才会被缓存exclude- 字符串或正则表达式。任何名称匹配的组件都不会被缓存max- 数字。最多可以缓存多少组件实例- 用法：
当组件在activated和deactivated这两个生命周期钩子函数将会被对应执行。
在 2.2.0 及其更高版本中，
activated和deactivated将会在树内的所有嵌套组件中触发
主要用于保留组件状态或避免重新渲染
<keep-alive>
<router-view>router-view>
keep-alive>
<keep-alive>
<router-view v-if="a >1">router-view>
<router-view v-else>router-view>
keep-alive>
<transition>
<keep-alive>
<router-view>router-view>
keep-alive>
transition>
注意v-for 则不会工作。如果有上述的多个条件性的子元素，
先简单演示一下 keep-alive 的用法
home.vue 是主页面，里面有两个子页面 one.vue 和 two.vue
home.vue
<template>
<div>
<p>home页面p>
<router-link to="/home/one">onerouter-link>
<router-link to="/home/two">tworouter-link>
<keep-alive>
<router-view>router-view>
keep-alive>
div>
template>
<script>
export default {
name: 'home'
}
script>
在 home.vue 页面中路由被
one.vue
<template>
<div>
<p>onep>
<div>
<span v-for="(item, key) in tabs" :class="{selected: key == currentTab}" :key="key" @click="changeTab(key)">{
{ item.name }}span>
div>
<div class="current-content" v-show="currentTab === 'btn1'">
<p>按钮1的内容p>
div>
<div class="current-content" v-show="currentTab === 'btn2'">
<p>按钮2的相关内容p>
<p>哈啊啊啊啊啊啊啊啊啊啊啊p>
div>
div>
template>
<script>
export default {
name: 'one',
// 页面第一次进入，钩子函数触发顺序：created-> mounted -> activated，退出页面触发 deactivated。
// 当再次进入页面(前进或后退)时，只会触发 activated
data() {
return {
tabs: {
btn1: {
name: '按钮1',
value: ''
},
btn2: {
name: '按钮2',
value: ''
}
},
currentTab: 'btn1'
}
},
methods: {
changeTab(key) {
this.currentTab = key
}
},
created() {
console.log('我是第一个created')
},
mounted() {
console.log('我是第二个mounted')
},
activated() {
console.log('我是第三个activated')
},
deactivated() {
console.log('我是deactivated')
}
}
script>
<style scoped>
.selected {
color: #2680bf;border: 1px solid #2680bf;}
style>
two.vue
<template>
<div>two</div>
</template>
<script>
export default {
name: 'two'
}
</script>
使用了 keep-alive 的页面效果
测试结果分析：
activated和deactivated
- 使用了
keep-alive后，在one页面中选中按钮2，切换到two页面后，再切换回来，还是选中了按钮2。页面进行了缓存。 activated和deactivated这两个生命周期函数只有在使用了keep-alive组件后才会执行- 页面第一次进入时，钩子函数的触发顺序是
created->mounted->activated，退出时才会触发deactivated。当再次进入页面 （前进或后退）时，只会触发activated。
include和exclude
include 和 exclude prop 允许组件有条件地缓存。二者都可以用逗号分隔字符串，正则表达式或一个数组
<keep-alive include="one,two">
<router-view>router-view>
keep-alive>
<keep-alive :include="/one|two/">
<router-view>router-view>
keep-alive>
<keep-alive :include="['one','two']">
<router-view>router-view>
keep-alive>
匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称（父组件 components 选项的键值）。匿名组件不能被匹配。
max
最多可以缓存多少组件实例。一旦这个数字达到了，在新实例被创建之前，已经缓存组件中最久没有被访问的实例会被销毁掉
<keep-alive :max="10">
<router-view>router-view>
keep-alive>
keep-alive不会在函数式组件中正常工作，因为它们没有缓存实例。
keep-alive 部分使用实例
结合router，缓存部分页面
使用 $route.meta的 keepAlive 属性
<keep-alive>
<router-view v-if="$route.meta.keepAlive">router-view>
keep-alive>
<router-view v-if="!$route.meta.keepAlive">router-view>
需要在 router的路由配置中设置 router 的元信息 meta，
keepAlive：这个路由是否需要缓存deepth：深度，也就是页面之间的前进后退的层次关系，可选
{
path: '/home',
name: 'home',
component: home,
meta: {
keepAlive: true, // 需要缓存，为false，则表示不需要缓存
deepth: 1
},
}
然后可以实时监听路由的变化
data() {
return {
include: []
};
},
watch: {
$route(to, from) {
// 如果要to(进入)的页面是需要keepAlive缓存的，把name push进include数组中
if (to.meta.keepAlive) {
!this.include.includes(to.name) && this.include.push(to.name);
}
// 如果 要 form(离开) 的页面是 keepAlive缓存的，
// 再根据 deepth 来判断是前进还是后退
// 如果是后退：
if (from.meta.keepAlive && to.meta.deepth < from.meta.deepth) {
const index = this.include.indexOf(from.name);
index !== -1 && this.include.splice(index, 1);
}
}
}
其实一共需要两步：设置 meta，监听路由并判断。
注意：
你的路由中定义的 name 和页面中定义的 name 一定要全等，并区分大小写
{
path: '/home',
name: 'home', // 两者之间 name 的值要完全一样
component: home,
meta: {
title: pageTitle},
}
export default {
name: 'home' // 两者之间 name 的值要完全一样
}
当然，也可以通过动态设置route.meta的keepAlive属性来实现其他需求，
首页是A页面
B页面跳转到A，A页面需要缓存
C页面跳转到A，A页面不需要被缓存
思路是在每个路由的beforeRouteLeave(to, from, next)钩子中设置to.meta.keepAlive：