当前位置：首页 > news >正文

Vue中keep-alive实现原理解析

news 2026/6/17 8:32:58

Vue中keep-alive的实现原理

什么是keep-alive

keep-alive是Vue内置的一个抽象组件，用于保留组件状态或避免重新渲染。它不会在DOM树中渲染成任何实际的标签，只是将其包裹的组件实例缓存起来。

核心实现原理

1. 基于LRU缓存算法

keep-alive内部使用LRU（Least Recently Used）缓存策略来管理组件实例：

// 简化的LRU缓存实现
class LRUCache {constructor(max) {this.max = maxthis.cache = new Map()}get(key) {if (!this.cache.has(key)) return undefinedconst value = this.cache.get(key)// 移动到最新位置this.cache.delete(key)this.cache.set(key, value)return value}set(key, value) {if (this.cache.has(key)) {this.cache.delete(key)} else if (this.cache.size >= this.max) {// 删除最久未使用的const firstKey = this.cache.keys().next().valuethis.cache.delete(firstKey)}this.cache.set(key, value)}
}

2. 组件缓存机制

// keep-alive核心实现伪代码
export default {name: 'keep-alive',abstract: true, // 抽象组件props: {include: [String, RegExp, Array], // 包含的组件exclude: [String, RegExp, Array], // 排除的组件max: [String, Number]             // 最大缓存数},created() {this.cache = Object.create(null)    // 缓存对象this.keys = []                      // 缓存的key数组},destroyed() {// 清理所有缓存for (const key in this.cache) {pruneCacheEntry(this.cache, key, this.keys)}},mounted() {// 监听include/exclude变化this.$watch('include', val => {pruneCache(this, name => matches(val, name))})this.$watch('exclude', val => {pruneCache(this, name => !matches(val, name))})},render() {const slot = this.$slots.defaultconst vnode = getFirstComponentChild(slot)if (vnode && vnode.componentOptions) {const name = getComponentName(vnode.componentOptions)const { include, exclude } = this// 检查是否需要缓存if ((include && (!name || !matches(include, name))) ||(exclude && name && matches(exclude, name))) {return vnode}const { cache, keys } = thisconst key = vnode.key == null? vnode.componentOptions.Ctor.cid + (vnode.componentOptions.tag ? `::${vnode.componentOptions.tag}` : ''): vnode.keyif (cache[key]) {// 已缓存，复用实例vnode.componentInstance = cache[key].componentInstance// 调整key位置remove(keys, key)keys.push(key)} else {// 首次缓存cache[key] = vnodekeys.push(key)// 如果超过最大限制，删除最久未使用的if (this.max && keys.length > parseInt(this.max)) {pruneCacheEntry(cache, keys[0], keys, this._vnode)}}vnode.data.keepAlive = true}return vnode || (slot && slot[0])}
}

3. 生命周期处理

当组件被keep-alive缓存时，会触发特殊的生命周期：

// 组件激活时
function activated() {// 调用缓存的activated钩子if (vnode.componentInstance && vnode.componentInstance._isDestroyed) {return}if (vnode.data.keepAlive) {if (vnode.componentInstance._inactive) {vnode.componentInstance._inactive = false}callHook(vnode.componentInstance, 'activated')}
}// 组件停用时
function deactivated() {// 调用缓存的deactivated钩子if (vnode.data.keepAlive) {if (!vnode.componentInstance._inactive) {vnode.componentInstance._inactive = true}callHook(vnode.componentInstance, 'deactivated')}
}

实际使用示例

<template><div><button @click="toggleComponent">切换组件</button><keep-alive :include="['ComponentA']" :max="5"><component :is="currentComponent"></component></keep-alive></div>
</template><script>
export default {data() {return {currentComponent: 'ComponentA'}},methods: {toggleComponent() {this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA'}},components: {ComponentA: {template: '<div>组件A - {{ count }}</div>',data() {return { count: 0 }},activated() {console.log('ComponentA 激活')},deactivated() {console.log('ComponentA 停用')},mounted() {setInterval(() => {this.count++}, 1000)}},ComponentB: {template: '<div>组件B</div>'}}
}
</script>