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

keep-alive

是一个抽象组件:它自身不会渲染一个 DOM 元素,主要用于保留组件状态或避免重新渲染

实际项目中:

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

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

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

做法1:

利用keep-alive的include或exclude属性(每个组件需要指定name,include和exclude属性需要对应组件name)



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


<keep-alive exclude="com1,com2">
	<routerView />
keep-alive>

或者



<keep-alive include="com1,com2">
	<routerView />
keep-alive>
做法2:

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

  1. 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		//缓存
    		}
    },
    
  2. App.vue
    <div id="app">
        <keep-alive>
    		 <router-view v-if="$route.meta.keepAlive" />
        keep-alive>
        <router-view v-if="!$route.meta.keepAlive" />
    div>
    

你可能感兴趣的:(Vue)