keep-alive是什么

keep-alive是vue中的一个内置组件，主要是将组建缓存到内存中，避免切换路由的时候页面刷新从而倒是dom的重新渲染

用法

• 在没有使用keep-alive的组件中，在路由切换或者回退的时候仍然会重新渲染页面，从而触发created，mounted等钩子函数，用户体验不好。 比如一些场景下我们使用keep-alive可以提高用户信息，多级菜单+表单验证，列表页+详情页等场景。

• 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。

• 当组件在 <keep-alive> 内被切换时，它的 mounted 和 unmounted 生命周期钩子不会被调用，取而代之的是 activated 和 deactivated。(这会运用在 <keep-alive> 的直接子节点及其所有子孙节点。)

• include 和 exclude

  • include 和 exclude prop 允许组件有条件地缓存， include 代表包含缓存的组件，exclude 代表缓存除了此组件的其他组件

<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- regex (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- Array (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

基本写法

在vue3.x的写法中和vue2.x的写法中有略微的区别，在vue3.x使用vue2.x版本的写法控制台会给出警告提示vue3.x的写法，这里改一下就好了

<template>
	<router-view v-slot="{ Component }">
	  <keep-alive">
	    <component :is="Component"/>
	  </keep-alive>
	</router-view>
</template>

条件缓存

考虑到列表页面跳转到详情页面的情况下，保证上一级页面的页面数据不会刷新，例如两个页面A页面—>>>列表页，B页面—>>>详情页，A–>>B–>>A 缓存A页面的数据

<template>
	<router-view v-slot="{ Component }">
	  <keep-alive :include="includeList">
	    <component :is="Component"/>
	  </keep-alive>
	</router-view>
</template>
<script>
import { reactive, watch, toRefs } from '@vue/runtime-core'
import { useRoute, useRouter } from 'vue-router'
  export default {
    name: 'Test',
    setup(){
      const state = reactive({
        includeList: []
      })
      const route = useRoute()
      // const router = useRouter()
      watch(() => route,(newVal,oldVal)=>{
        if(newVal.meta.keepAlive && state.includeList.indexOf(newVal.name) === -1){
          state.includeList.push(newVal.name);
          console.log(state.includeList);
        }
      },{deep:true}) // 开启深度监听
      return{
        ...toRefs(state)
      }
    }
  }
</script>

路由配置

{
  path: 'test',
  name: 'Test',
  component: () => import('@/views/Test'),
  meta: {
    keepAlive: true, // 组件需要缓存
  }
},

官网文档

https://v3.cn.vuejs.org/api/built-in-components.html#keep-alive