当前位置：首页 > VUE

vue keep alive 实现

2026-03-08 19:22:32VUE

Vue Keep-Alive 实现原理

Vue的<keep-alive>是一个内置组件，用于缓存不活动的组件实例，避免重复渲染和销毁。以下是其核心实现机制：

缓存机制

<keep-alive>通过LRU（最近最少使用）算法管理缓存。组件被包裹时，Vue会将其vnode（虚拟节点）和DOM节点缓存起来。当组件再次激活时，直接从缓存中取出，避免重新创建。

vue keep alive 实现

生命周期钩子

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

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

基本用法

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

配置参数

<keep-alive>支持以下props：

vue keep alive 实现

include：字符串或正则表达式，只有名称匹配的组件会被缓存
exclude：字符串或正则表达式，名称匹配的组件不会被缓存
max：数字，最多可以缓存的组件实例数量

<keep-alive :include="['ComponentA', 'ComponentB']" :max="10">
  <router-view></router-view>
</keep-alive>

实现细节

在Vue源码中，<keep-alive>组件主要通过以下方式工作：

在render函数中获取子组件的vnode
根据include/exclude规则判断是否需要缓存
使用缓存对象存储组件实例
处理组件激活/停用时的状态恢复

与Router结合

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

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

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

注意事项

被缓存的组件必须有name选项，用于include/exclude匹配
频繁切换的大型组件可能导致内存占用过高
动态组件切换时，需要考虑组件状态的保持问题

标签: vue keep

分享给朋友：

vue全选实现

Vue 全选实现方法在 Vue 中实现全选功能通常涉及数据绑定和事件处理。以下是几种常见的实现方式：基础实现方式 <template> <div> <…

vue实现颜色

Vue 实现颜色的方法在 Vue 中实现颜色管理可以通过多种方式，以下是一些常见的方法：使用 CSS 变量动态绑定颜色在 Vue 组件的样式中定义 CSS 变量，并通过 Vue 的数据绑定动态…

vue实现webapp

Vue 实现 WebApp 的基本步骤环境准备确保已安装 Node.js 和 npm/yarn。通过 Vue CLI 或 Vite 创建项目： npm install -g @vue/cli v…

vue实现slot

Vue 中的 Slot 实现方法 Vue 的 slot 是一种内容分发机制，允许父组件向子组件插入内容。以下是几种常见的 Slot 实现方式：默认 Slot 子组件通过 <slot>…

vue实现123456

Vue 实现数字 123456 的显示在 Vue 中显示数字 123456 非常简单，可以通过以下方法实现：方法一：直接在模板中显示 <template> <div>…

vue首页实现

实现Vue首页的基本步骤创建一个Vue首页通常涉及项目初始化、页面结构设计、路由配置和组件开发。以下是具体实现方法：初始化Vue项目使用Vue CLI或Vite快速搭建项目结构： npm i…

vue keep alive 实现