keep-alive 是 Vue.js 提供的一个内置组件,用于缓存动态组件或路由组件,避免组件在切换时被反复创建和销毁,从而提高应用的性能和用户体验。
在我们用Vue.js做移动端开发的时候,经常会遇到这样的应用场景:
-
首先,让用户看到新闻列表;然后点击新闻标题,切换到新闻详情的组件,以展示新闻详情。
很多应用场景都于此类似,比如先进入商品列表,点击某一个商品条目,则切换到商品详情的组件。 -
这种场景往往会碰到一个问题,当我每一次从详情组件退回到列表组件的时候,列表组件会重新发出ajax请求。考虑到下面2条原因,总觉得这么不好。
- 列表组件上的数据不会在短短几分钟之内就更新,完全没必要每次都发出ajax请求。这样势必降低用户体验
- 浪费移动设备的流量。(如果流量无限,这条可以无视)
-
总之,即使只有第1条原因,我们也应该不让它每次退回到列表页的时候都重新发出ajax请求。
如何解决这个问题?
可以使用Vue.js自带的keep-alive
- keep-alive用法
是Vue的内置组件,包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。
- 它使用的时候非常简单,示例代码如下:
<keep-alive>
<router-view></router-view>
<!--这里是会被缓存的组件-->
</keep-alive>
这里需要说明的是,本示例是使用了vue-router的,所以这里的keep-alive中放了1个router-view。
这是最简单的用法。这样会使所有在vue-router中渲染的组件,全部都将状态保留在内存。
如果你只想缓存部分组件的状态。那么可以使用keep-alive的include属性。
- keep-alive 提供了
include
和exclude
属性,用于指定哪些组件需要被缓存或不被缓存。这两个属性的值可以是字符串、正则表达式或数组。- include: 只有名称匹配的组件会被缓存。
- exclude: 名称匹配的组件不会被缓存。
例如,我们有组件newsList和newsInfo,imageList和imageInfo,但是我们只想缓存newsList和imageList这2个列表组件的数据。那么可以这么使用
<keep-alive include="newsList,imageList">
<router-view></router-view>
</keep-alive>
然后还有一步,必须在需要被缓存状态的组件的script部分,给组件添加一个name属性。例如:
以newsList.vue组件为例
<template>
<!-- 这里是newslist组件的html结构部分 -->
</template>
<script>
export default {
name: "newsList", //如果使用了keep-alive缓存该组件状态,则此组件必须有这个属性。
data(){
return {}
}
</script>
需要说明的是,如果没有使用keep-alive缓存状态的组件,可以不写这个属性。但是如果使用了keep-alive缓存该组件状态,则此组件必须有这个属性。并且,这个属性的值,还必须跟标签中include属性的值完全一致,包括大小写。
生命周期钩子
当组件被 keep-alive 缓存时,会有两个特殊的生命周期钩子函数:
- activated:当组件被激活时调用,即组件从缓存中重新显示时触发。
- deactivated:当组件被停用时调用,即组件被缓存起来时触发。
<template>
<div>
This is ComponentA.
</div>
</template>
<script>
export default {
activated() {
console.log('ComponentA is activated');
},
deactivated() {
console.log('ComponentA is deactivated');
}
};
</script>
结合路由使用
在 Vue Router 中使用 keep-alive 可以缓存路由组件。通常在 App.vue 中使用:
<template>
<div id="app">
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component" :key="$route.fullPath"></component>
</keep-alive>
</router-view>
</div>
</template>
这里使用了 v-slot 来获取 router-view 渲染的组件,然后用 keep-alive 进行包裹,实现路由组件的缓存。同时,通过 :key=“$route.fullPath” 确保在路由切换时能正确识别不同的路由。
最大缓存实例数
keep-alive 还提供了 max 属性,用于限制缓存组件的最大数量。当缓存的组件数量超过 max 指定的值时,最早缓存的组件会被销毁。
<keep-alive max="2">
<component :is="currentComponent"></component>
</keep-alive>
在这个例子中,最多只会缓存两个组件实例。