keep-alive标签为<keep-alive></keep-alive>,是Vue内置的一个组件，可以使被包含的组件保留状态或避免重新污染。

keep-alive应用在<route-view>上的demo。

keep-alive文件

<template>
   <div>
        <div>
            <router-link to="/keep/date">date</router-link>
            <router-link to="/keep/user">user</router-link>
        </div>
        <div style="margin-top: 15px">
            <router-view v-slot="{ Component }">
                <keep-alive :include="/Include/">
                    <component :is="Component"></component>
                </keep-alive>
            </router-view> 
        </div>
   </div>
</template>

import { defineComponent } from "vue";

export default defineComponent({
    name: 'keepalive',
})

user文件

<template>
    <div>
        user文件
        <input type="text">
    </div>
</template>

import { defineComponent } from "vue";

export default defineComponent({
    name: 'keepUserInclude'
})

date文件

<template>
    <div>
        date文件
        <input type="date">
    </div>
</template>

import { defineComponent } from "vue";

export default defineComponent({
    name: 'keepDate'
})

route文件配置

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory('./'),
  routes: [
    {
      path: '/keep',
      name: 'KeepAlive',
      redirect: '/keep/user',
      component: () => import(/* webpackChunkName: 'keep-alive' */ '@/views/keep-alive/index.vue'),
      children: [
        {
          path: 'user',
          name: 'KeepUser',
          component: () => import(/* webpackChunkName: 'keep-user' */ '@/views/keep-alive/components/user.vue')
        },
        {
          path: 'date',
          name: 'KeepDate',
          component: () => import(/* webpackChunkName: 'keep-page' */ '@/views/keep-alive/components/date.vue')
        },
      ]

    },
    
  ]
})

export default router

上面的代码中，只有user组件的内容会被缓存。include/exclude可以设置单个字符串或者正则表达式，也可以是一个由字符串或者正则表达式组成的数组，匹配内容是组件名称。该段代码使用include仅缓存包含’/Include/'的字符串。exclude表示不需要缓存的文件。

**组件名称是组件的name属性。

export default defineComponent({
    name: 'keepUserInclude'
})

缓存实例的生命周期

两个生命周期钩子函数：

import { defineComponent, onActivated, onDeactivated } from 'vue'

export default defineComponent({
  
  setup() {
    onActivated() {
      // 调用时机为首次挂载及每次从缓存中被重新插入时
    }
    
    
    onDeactivated() {
      // 从DOM上移除、进入缓存以及在组件卸载时调用
    }
  }
})

使用<keep-alive>时应当谨慎，不当的使用可能会导致内存占用过高，特别是当缓存了很多大组件或者不再需要的组件时。可以通过max参数来限制可被缓存的最大组件实例数。

<router-view v-slot="{ Component }">
  <keep-alive :include="/Include/" :max="10">
    <component :is="Component"></component>
  </keep-alive>
</router-view> 

使用场景

1.提升用户体验：

• 路由切换：当用户在多个视图间频繁切换时，使用<keep-alive>可以保持组件状态，避免重新加载，提升应用响应速度和用户体验。
• 表单填写：在需要参考其他页面进行表单填写时，切换回来后不需要重新填写表单。

2.避免重复请求：

• 数据获取：对于需要从服务器获取数据的组件，使用<keep-alive>可以避免在组件切换时重复发送请求。
• 优化性能：如果组件的重渲染开销很大，使用<keep-alive>可以减少不必要的渲染，从而提高性能。