keep-alive基础使用

在Vue3中，<keep-alive>用于缓存组件状态，提升应用性能。以下是核心用法：

基础使用

<template>
  <!-- 包裹动态组件 -->
  <keep-alive>
    <component :is="currentComponent"></component>
  </keep-alive>

  <!-- 包裹路由视图 -->
  <keep-alive>
    <router-view></router-view>
  </keep-alive>
</template>

缓存控制

1. 指定缓存组件：

<keep-alive :include="['Home', 'Profile']" :exclude="['About']" :max="5">
  <component :is="currentComponent"></component>
</keep-alive>

2. 生命周期钩子（组合式API）：

import { onActivated, onDeactivated } from 'vue'

export default {
  setup() {
    onActivated(() => {
      console.log('组件激活')
    })
    
    onDeactivated(() => {
      console.log('组件停用')
    })
  }
}

结合路由使用

<template>
  <router-view v-slot="{ Component }">
    <transition name="fade">
      <keep-alive include="HomeView">
        <component :is="Component" />
      </keep-alive>
    </transition>
  </router-view>
</template>

注意事项

1. 被缓存组件必须设置name选项
2. 使用max属性可限制最大缓存实例数
3. 当使用v-if切换组件时，建议用key属性强制刷新：

<keep-alive>
  <component :is="currentComponent" :key="currentComponent"></component>
</keep-alive>