一、需求背景
项目主流程缓存优化,主流程页面(组件)切换时保持之前加载的状态,避免反复渲染影响页面性能,同时也可以很大程度上减少接口请求,减小服务器压力。
二、概念和作用
概念:keep-alive 是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 transition 相似,keep-alive 是一个抽象组件:它自身不会渲染成一个 DOM 元素,也不会出现在父组件链中。
作用:在组件切换过程中将状态保留在内存中,防止重复渲染DOM,减少加载时间及性能消耗,提高用户体验性。
<div id="app" v-if="visible">
<transition :name="transitionName">
<!-- keep-alive 缓存 -->
<keep-alive :exclude="exclude">
<router-view class="child-view keep-alive" v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
</transition>
<transition :name="transitionName">
<router-view class="child-view" v-if="!$route.meta.keepAlive"></router-view>
</transition>
</div>
三、原理
在
created
函数调用时将需要缓存的VNode
节点保存在 this.cache 中。在render
(页面渲染) 时,如果VNode
的name
符合缓存条件(可以用 include 以及 exclude 控制),则会从 this.cache 中取出之前缓存的VNode
实例进行渲染。(VNode
:虚拟DOM
,其实就是一个JS对象)
四、keep-alive内置组件的属性
- include:字符串或正则表达式。只有名称匹配的组件会被缓存。
- exclude:字符串或正则表达式。任何名称匹配的组件都不会被缓存。
- max:数字,最多可以缓存多少组件实例。
五、生命周期函数
- activated
在 keep-alive 组件激活时调用,该钩子函数在服务器端渲染期间不被调用。
- deactivated
在 keep-alive 组件停用时调用,该钩子在服务器端渲染期间不被调用。
被包含在 keep-alive 中创建的组件,会多出两个生命周期的钩子: activated 与 deactivated,使用 keep-alive 会将数据保留在内存中,如果要在每次进入页面的时候获取最新的数据,需要在 activated 阶段获取数据,承担原来 created 钩子函数中获取数据的任务。
注意:只有组件被 keep-alive 包裹时,这两个生命周期函数才会被调用,如果作为正常组件使用,是不会被调用的,以及在 2.1.0 版本之后,使用 exclude 排除之后,就算被包裹在 keep-alive 中,这两个钩子函数依然不会被调用!另外,在服务端渲染时,此钩子函数也不会被调用。
六、示例
1.缓存所有页面
<!-- 在 App.vue 里面-->
<template>
<div id="app">
<keep-alive>
<router-view/>
</keep-alive>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
2.根据条件缓存页面
<!-- 在 App.vue 里面-->
<template>
<div id="app">
<!-- 将缓存 name 为 test 的组件 -->
<keep-alive include='test'>
<router-view/>
</keep-alive>
<!-- 将缓存 name 为 a 或者 b 的组件,结合动态组件使用 -->
<keep-alive include='a,b'>
<router-view/>
</keep-alive>
<!-- 使用正则表达式,需使用 v-bind -->
<keep-alive :include='/a|b/'>
<router-view/>
</keep-alive>
<!-- 动态判断 -->
<keep-alive :include='includedComponents'>
<router-view/>
</keep-alive>
<!-- 将不缓存 name 为 test 的组件 -->
<keep-alive exclude='test'>
<router-view/>
</keep-alive>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
3.结合Router,缓存部分页面
//在 router 目录下的 index.js 文件里
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 里面
<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>
七、vue动态组件中keepAlive中的使用,路由全局守卫,keepAlive组件量身定制的钩子
对于简单的项目,这样处理就够了,但是如果有些复杂的项目,例如到产品详情页,与最近一次到达产品详情页对比,如果是相同的产品则使用上一次的缓存,如果不是那就重新加载页面。
进入组件时,将该组件的fullpath存到该组件的路由元中(做个标记),这个在路由全局守卫中可以轻易做到。下次进来拿它路由元中的lastHistoryFullPath就知道最近一次进来的是哪个产品详情页了。
to.meta.lastHistoryFullPath = to.fullPath;
路由全局守卫
// keepAlive 缓存处理
if(to.name !== from.name && to.meta.keepAlive){
//判断目标路径和历史路径是否相同
if(to.meta.lastHistoryFullPath && to.meta.lastHistoryFullPath === to.fullPath || !to.meta.lastHistoryFullPath){
//相同则读取缓存数据
to.meta.keepAliveChange = false;
} else if (to.meta.lastHistoryFullPath && to.meta.lastHistoryFullPath !== to.fullPath){
//不同则重载
to.meta.keepAliveChange = true;
}
}
to.meta.lastHistoryFullPath = to.fullPath;
App路由监听
watch: {
'$route' (to, from){
//keepAlive 缓存机制刷新
if (to.meta.keepAlive && to.meta.keepAliveChange) {
this.excludeRouterName.push(to.name);
this.$nextTick(_=>{
this.excludeRouterName.pop();
});
}
}
}