keep-alive缓存

keep-alive 是 Vue 的内置组件，用于缓存动态组件或路由切换时的组件实例，避免重复渲染。

基本用法

<template>
  <keep-alive>
    <component :is="currentTab" />
  </keep-alive>
</template>

<script setup>
import { ref } from 'vue'
const currentTab = ref('TabA')
</script>

切换 tab 时，组件不会被销毁，而是缓存起来。

include 与 exclude

<!-- 只缓存指定组件 -->
<keep-alive :include="['TabA', 'TabB']">
  <component :is="currentTab" />
</keep-alive>

<!-- 排除指定组件 -->
<keep-alive :exclude="['Settings']">
  <router-view />
</keep-alive>

<!-- 使用正则表达式 -->
<keep-alive :include="/^Tab/">
  <component :is="currentTab" />
</keep-alive>

max 缓存数量限制

<!-- 最多缓存 10 个组件，超出时销毁最早缓存的 -->
<keep-alive :max="10">
  <router-view />
</keep-alive>

生命周期钩子

export default {
  data() {
    return { count: 0 }
  },
  created() {
    console.log('created')  // 仅首次创建时触发
  },
  mounted() {
    console.log('mounted')  // 仅首次挂载时触发
  },
  activated() {
    console.log('activated') // 每次激活时触发
  },
  deactivated() {
    console.log('deactivated') // 每次缓存时触发
  },
  beforeUnmount() {
    console.log('beforeUnmount') // 仅真正销毁时触发
  }
}

路由中的 keep-alive

// router/index.js
const routes = [
  {
    path: '/list',
    component: List,
    meta: { keepAlive: true }  // 标记需要缓存
  }
]

<!-- App.vue -->
<router-view v-slot="{ Component }">
  <keep-alive>
    <component :is="Component" />
  </keep-alive>
</router-view>

缓存机制原理

// keep-alive 内部实现简化
const KeepAlive = {
  props: ['max', 'include', 'exclude'],
  setup(props, { slots }) {
    const cache = new Map()      // 缓存组件实例
    const keys = []              // 缓存key列表
    
    return () => {
      const vnode = slots.default()?.[0]
      const key = vnode.key || vnode.type.name
      
      if (cache.has(key)) {
        // 命中缓存，复用实例
        const cached = cache.get(key)
        vnode.componentInstance = cached.instance
        // LRU: 移到末尾
        keys.splice(keys.indexOf(key), 1)
        keys.push(key)
      } else {
        // 未命中，创建并缓存
        cache.set(key, vnode)
        keys.push(key)
        
        // 超出max，销毁最老的
        if (props.max && keys.length > props.max) {
          pruneCache(cache, keys[0])
          keys.shift()
        }
      }
      return vnode
    }
  }
}

清除缓存

// 手动清除指定组件缓存
const removeCacheEntry = (key) => {
  delete cache[key]
  const idx = keys.indexOf(key)
  if (idx > -1) keys.splice(idx, 1)
}

要点总结

• keep-alive 缓存组件实例，避免重复创建
• 使用 include/exclude 精确控制缓存范围
• max 限制缓存数量，使用 LRU 策略淘汰
• 缓存组件使用 activated/deactivated 钩子
• 路由切换时配合 router-view 实现页面缓存