Vue3中使用keep-alive缓存组件

 1.原理

使用keepalive， 会增加activated和deactivated这两个生命周期钩子，unmouted不会再被触发，所以组件不会被真正销毁。

在第一次渲染时，会触发mounted -> activated，此时组件会被缓存，退出时会触发deactivated，不会触发unmouted。

再次进入时，只会触发activated， 读取缓存信息。

2 基本使用

​
 <router-view>
      <keep-alive>
        <component :is="Component"></component>
      </keep-alive> 
      <component :is="Component"></component>
 </router-view>
 

​

2.1 v-if

在路由中配置meta属性，配合v-if实现选择性缓存(true为需要缓存）

​
{
    path: “/home", 
	name: "home",
	meta: {
		keepAlive: true  //需要缓存
	},
	component: () => import('../views/ home/home.vue'),
},

​

 在页面中使用

 <router-view>
      <keep-alive>
        <component :is="Component" v-if="$route.meta.keepAlive"></component>
      </keep-alive>
 
      <component :is="Component" v-if="!$route.meta.keepAlive"></component>
 </router-view>
 

2.2 include和exclude

 include 代表包含缓存的组件

​
 <router-view>
      <keep-alive :include='home'>//表示只缓存home这个组件
        <component :is="Component" v-if="$route.meta.keepAlive"></component>
      </keep-alive>
 
      <component :is="Component" v-if="!$route.meta.keepAlive"></component>
 </router-view>
 

​

exclude代表缓存除了此组件的其他组件

​
​
 <router-view>
      <keep-alive :exclude='home'>//表示除了home组件，其他都缓存
        <component :is="Component" v-if="$route.meta.keepAlive"></component>
      </keep-alive>
 
      <component :is="Component" v-if="!$route.meta.keepAlive"></component>
 </router-view>
 

​

​