当前位置：首页 > VUE

vue路由缓存实现原理

2026-01-20 23:09:28VUE

Vue 路由缓存的实现原理

Vue 路由缓存主要通过 <keep-alive> 组件和路由配置的 meta 字段实现，用于保留组件状态或避免重新渲染。

核心机制

<keep-alive> 是 Vue 内置组件，通过抽象组件（无真实 DOM 节点）管理缓存。被包裹的组件实例会被缓存，避免重复创建和销毁。

路由配置中通过 meta.keepAlive 标记需要缓存的组件：

vue路由缓存实现原理

{
  path: '/detail',
  component: Detail,
  meta: { keepAlive: true }
}

缓存匹配逻辑

<keep-alive> 通过 include/exclude 属性匹配组件：

<keep-alive :include="cachedViews">
  <router-view></router-view>
</keep-alive>

动态缓存管理通常结合 Vuex 存储需缓存的组件名：

vue路由缓存实现原理

// 路由钩子中动态添加/移除缓存
router.beforeEach((to, from, next) => {
  if (from.meta.keepAlive) {
    store.commit('ADD_CACHED_VIEW', from.name)
  }
  next()
})

生命周期变化

被缓存的组件会触发特定生命周期：

activated：组件被激活时调用
deactivated：组件被停用时调用

常规生命周期如 mounted 只会在首次渲染时执行。

LRU 缓存策略

<keep-alive> 默认采用 LRU（最近最少使用）算法管理缓存。当缓存实例数量超过 max 属性值时，最久未使用的实例会被销毁。

实现源码关键点

缓存标识：通过组件 name 或 tag 作为缓存键
组件复用：命中缓存时直接激活旧实例
内存管理：缓存超过上限时自动清理

// 伪代码展示核心逻辑
const cache = new Map()
function render() {
  const key = component.name
  if (cache.has(key)) {
    return cache.get(key)
  } else {
    const instance = createComponent()
    cache.set(key, instance)
    return instance
  }
}