什么是 keep-alive
keep-alive顾名思义就是保持活跃。
keep-alive是Vue的抽象组件,它自身不会渲染一个 DOM 元素,也不会出现在组件的父组件链中。
keep-alive 的作用
<keep-alive>
包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。
当我们在切换组件时,被keep-alive包裹的组件会被缓存到内存中,防止重复地渲染DOM,减少不必要的请求。总的来说就是,主要用于保留组件状态或避免重新渲染(比如在组件的表单里填入数据,组件切换后数据任存在)。
keep-alive的原理
在 created 函数调用时将需要缓存的 VNode 节点保存在 this.cache 中/在 render(页面渲染) 时,如果 VNode 的 name 符合缓存条件(可以用 include 以及 exclude 控制),则会从 this.cache 中取出之前缓存的 VNode 实例进行渲染。
VNode:虚拟DOM,其实就是一个JS对象。
Props
include
- 字符串或正则表达式。只有名称匹配的组件会被缓存。exclude
- 字符串或正则表达式。任何名称匹配的组件都不会被缓存。max
- 数字。最多可以缓存多少组件实例。
include 和 exclude
include
和 exclude
prop 允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。
<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
<component :is="view"></component>
</keep-alive>
<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
<component :is="view"></component>
</keep-alive>
<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
<component :is="view"></component>
</keep-alive>
include 和 exclude 都是通过检查组件自身的 name 选项来匹配,若 name 选项不可用,则匹配它的局部注册名称 (父组件 components
选项的键值)。
注意:匿名组件不能被匹配。
max
max 定义缓存组件上限,超出上限使用LRU(最近最少使用)的策略置换缓存数据。
生命周期函数
被 keep-alive 包裹的组件,其生命周期的钩子函数与一般的组件不相同,被缓存的组件实例不再进入$mount过程,那mounted之前的所有钩子函数(beforeCreate、created、mounted)都不再执行。
被包含在 keep-alive 中创建的组件,会多出两个生命周期的钩子: activated 与 deactivated。
使用 keep-alive 会将数据保留在内存中,如果要在每次进入页面的时候获取最新的数据,需要在 activated 阶段获取数据,承担原来 created 钩子函数中获取数据的任务。
activated
当 keep-alive 组件被激活的时候调用
deactivated
当 keep-alive 组件停用时调用
缓存所有页面
在App.vue中使用 keep-alive
<template>
<div id="app">
<keep-alive>
<router-view/>
</keep-alive>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
根据条件缓存页面
<template>
<div id="app">
// 1. 将缓存 name 为 test 的组件
<keep-alive include='test'>
<router-view/>
</keep-alive>
// 2. 将缓存 name 为 a 或者 b 的组件,结合动态组件使用
<keep-alive include='a,b'>
<router-view/>
</keep-alive>
// 3. 使用数组,需使用 v-bind
<keep-alive :include="['a', 'b']">
<router-view/>
</keep-alive>
// 4. 使用正则表达式,需使用 v-bind
<keep-alive :include='/a|b/'>
<router-view/>
</keep-alive>
// 5.动态判断,需使用 v-bind
<keep-alive :include='includedComponents'>
<router-view/>
</keep-alive>
// 6. 将不缓存 name 为 test 的组件
<keep-alive exclude='test'>
<router-view/>
</keep-alive>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
结合 Router,缓存部分页面数据
在router目录下的index.js文件中,为每一个路由添加 meta 属性,在 meat 属性里再添加一个keepAlive 属性,用来控制是否缓存。
import Vue from 'vue'
import Router from 'vue-router'
const Home = resolve => require(['@/components/home/home'], resolve)
const Goods = resolve => require(['@/components/home/goods'], resolve)
const Ratings = resolve => require(['@/components/home/ratings'], resolve)
const Seller = resolve => require(['@/components/home/seller'], resolve)
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home,
redirect: 'goods',
children: [
{
path: 'goods',
name: 'goods',
component: Goods,
meta: {
keepAlive: false // 不需要缓存
}
},
{
path: 'ratings',
name: 'ratings',
component: Ratings,
meta: {
keepAlive: true // 需要缓存
}
},
{
path: 'seller',
name: 'seller',
component: Seller,
meta: {
keepAlive: true // 需要缓存
}
}
]
}
]
})
在 App.vue 里,使用 keepAlive 属性判断
<template>
<div id="app">
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>