当前位置：首页 > VUE

vue keep alive实现

2026-03-28 23:44:14VUE

Vue Keep-Alive 实现

Vue 的 keep-alive 是一个内置组件，用于缓存动态组件或路由组件的状态，避免重复渲染和销毁，提升性能。以下是其实现方式和常见用法。

基本用法

keep-alive 可以包裹动态组件或路由组件，缓存其状态：

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

或用于缓存路由组件：

<template>
  <keep-alive>
    <router-view></router-view>
  </keep-alive>
</template>

缓存特定组件

通过 include 或 exclude 属性指定需要缓存或排除缓存的组件：

<keep-alive :include="['ComponentA', 'ComponentB']">
  <component :is="currentComponent"></component>
</keep-alive>

include 和 exclude 可以接受字符串、正则表达式或数组形式。

生命周期钩子

被 keep-alive 缓存的组件会触发特定的生命周期钩子：

activated：组件被激活时调用（从缓存中重新显示）。
deactivated：组件被停用时调用（进入缓存）。

export default {
  activated() {
    console.log('组件被激活');
  },
  deactivated() {
    console.log('组件被停用');
  }
};

结合路由使用

在 Vue Router 中，可以通过路由的 meta 字段控制缓存：

const routes = [
  {
    path: '/page-a',
    component: PageA,
    meta: { keepAlive: true }
  },
  {
    path: '/page-b',
    component: PageB,
    meta: { keepAlive: false }
  }
];

在模板中动态判断是否缓存：

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

实现原理

keep-alive 的核心实现逻辑：

通过插槽获取子组件实例。
使用缓存对象（如 cache）存储组件实例。
通过 include 和 exclude 过滤需要缓存的组件。
在组件切换时，将非活跃组件从 DOM 中移除（但保留实例），后续直接从缓存中恢复。

源码关键逻辑（简化版）：

vue keep alive实现

const cache = Object.create(null);

export default {
  render() {
    const slot = this.$slots.default;
    const vnode = slot[0];
    const key = vnode.key;

    if (cache[key]) {
      vnode.componentInstance = cache[key].componentInstance;
    } else {
      cache[key] = vnode;
    }

    return vnode;
  }
};