对指定组件进行keep-alive缓存(Vue)

keep-alive

<keep-alive>是一个抽象组件：它自身不会渲染一个 DOM 元素，主要用于保留组件状态或避免重新渲染

实际项目中：

对有网络请求的页面进行缓存，则重新回到该页面时，不会再请求数据，在一定程度上能减少网络请求，优化性能；
但在另一方面，如果返回上一页面时，需要刷新状态，此时就不太适用了

当组件在 <keep-alive>内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。可以在activated时进行刷新操作，但是这个做法则需要在每个要刷新都页面都写一次，效率太低。

对指定组件进行keep-alive缓存

做法1：

利用keep-alive的include或exclude属性（每个组件需要指定name，include和exclude属性需要对应组件name）

<!-- com1.vue -->

<template>
...
</template>
<script>
export default {
	name: "readMe1"
	...
}
</script>

<!--对除了com1,com2的其他所有组件进行缓存【com1,com2不缓存】-->
<keep-alive exclude="com1,com2">
	<routerView />
</keep-alive>

或者

<!--仅对com1,com2进行缓存-->
<keep-alive include="com1,com2">
	<routerView />
</keep-alive>

做法2:

利用路由meta指定是否keepAlive实现

router.js

{
		path: '/com1',
		name: 'com1',
		component: () => import(/* webpackChunkName: "com1" */ '../views/com1.vue'),
		meta: {
			keepAlive: false	//不缓存
		}
},
{
		path: '/com2',
		name: 'com2',
		component: () => import(/* webpackChunkName: "com2" */ '../views/com2.vue'),
		meta: {
			keepAlive: true		//缓存
		}
},

App.vue

<div id="app">
    <keep-alive>
		 <router-view v-if="$route.meta.keepAlive" />
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive" />
</div>

来源：CSDN

作者：前端的小刘老师

链接：https://blog.csdn.net/weixin_44489221/article/details/103540229

标签

keep-alive

缓存