vue3.0——keep-alive缓存

通过路由配置keepAlive判断是否缓存

当在内部切换组件时，将相应地调用其onActivated（缓存激活）和onDeactivated（在组件切换中老组件消失的时候执行）生命周期挂钩。
一.路由配置：

import { createRouter, createWebHashHistory } from 'vue-router';
import Home from '../views/Home.vue';//路由预加载

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,//路由预加载
    meta: { 
      keepAlive:true, //是否需要缓存
     }
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('@/views/About.vue'),//路由懒加载
    meta: { 
      keepAlive:false, ///是否需要缓存
     }
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

二.组件配置：

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
    <router-view v-slot="{ Component }">
      <!-- vue3.0配置 keep-alive缓存-->
      <keep-alive>
        <component :is="Component" v-if="$route.meta.keepAlive" />
      </keep-alive>
      <component :is="Component" v-if="!$route.meta.keepAlive" />
    </router-view>
  </div>
</template>
<script>
export default {
     
     
};
</script>

<style lang="less">
</style>

三.include和exclude，include是绑定需要缓存的组件，并且要和组件名一致；exclude绑定则是不需要缓存的组件。当两个属性同时使用时exclude权重大于include

  	<!-- 逗号分隔字符串 -->
    <keep-alive include="Home,About" exclude="About">
    	<component :is="Component" />
    </keep-alive>
    <!-- 正则表达式 (使用 `v-bind`) -->
    <keep-alive :include="/Home|About/">
    	 <component :is="Component"></component>
    </keep-alive>
    <!-- 数组 (使用 `v-bind`) -->
    <keep-alive :include="['Home', 'About']">
    	<component :is="Component"></component>
    </keep-alive>

四.缓存的最大数值
keep-alive还有一个max属性，代表缓存组件最大数量，一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。

	<keep-alive :max="10">
        <component :is="Component"></component>
    </keep-alive>

五.总结
对于keep-alive缓存，不能跨级缓存，缓存的是路由页面，也就是说不能指定缓存name = "Home"组件内的子组件，除非将子组件弄成路由页面，在通过keep-alive来缓存。