vue路由缓存实现原理

Vue 路由缓存实现原理

Vue 路由缓存主要通过 <keep-alive> 组件实现，结合 Vue Router 的动态路由匹配机制，可以缓存特定路由组件的状态，避免重复渲染和销毁。

<keep-alive> 组件的作用

<keep-alive> 是 Vue 内置的抽象组件，用于包裹动态组件或路由视图（<router-view>）。它会缓存不活动的组件实例，而不是销毁它们。当组件再次被激活时，直接从缓存中恢复实例，避免重新创建。

实现原理的核心机制

1. 缓存标识
   <keep-alive> 通过组件的 name 选项或路由配置的 name 字段作为缓存标识。若未显式指定 name，则使用组件的匿名标识（如 _uid）。

2. LRU 缓存策略
   默认情况下，<keep-alive> 使用 LRU（最近最少使用）算法管理缓存。当缓存数量超过 max 属性限制时，最久未访问的实例会被销毁。

   

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

   • activated：组件被激活时调用（从缓存恢复）。
   • deactivated：组件被停用时调用（进入缓存）。

与 Vue Router 的集成

在路由配置中，可以通过 meta 字段标记需要缓存的组件：

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

在 <router-view> 外层包裹 <keep-alive> 并动态判断：

<keep-alive>
  <router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" />

源码关键逻辑

1. 缓存存储
   Vue 内部通过 cache 对象（类似 Map 结构）存储组件实例，键为组件标识，值为 VNode。

2. 渲染控制
   <keep-alive> 在渲染时优先从缓存中获取 VNode，若未命中则渲染新实例并存入缓存。

3. 组件匹配
   通过 include/exclude 属性（支持字符串、正则或数组）控制哪些组件需要缓存：

   <keep-alive :include="['Home', 'About']">
     <router-view />
   </keep-alive>

性能优化建议

• 对复杂组件或数据加载成本高的页面使用缓存。
• 避免过度缓存导致内存占用过高，合理设置 max 属性。
• 结合路由守卫（如 beforeRouteLeave）清理敏感数据。