面试之《vue keep-alive原理》

keep-alive 是 Vue.js 提供的一个内置组件,用于缓存动态组件,避免组件在切换时重复创建和销毁,从而提升应用的性能。下面详细介绍其缓存组件的原理:

整体原理概述

keep-alive 会在内部维护一个缓存对象(cache)和一个键(keys)数组。当组件被包裹在 keep-alive 中并首次渲染时,keep-alive 会将该组件实例缓存起来,并记录其对应的键。当再次需要渲染该组件时,keep-alive 会从缓存中取出该组件实例,而不是重新创建一个新的实例,这样就避免了组件的重新渲染,提高了性能。

详细工作流程

1. 初始化阶段

当 Vue 实例创建时,如果遇到 keep-alive 组件,会对其进行初始化。在这个过程中,会创建一个 cache 对象和一个 keys 数组,用于存储缓存的组件实例和对应的键。以下是简化的代码示例:

javascript 复制代码
export default {
  name: 'keep-alive',
  abstract: true, // 标记为抽象组件,不会渲染成真实 DOM
  data() {
    return {
      cache: Object.create(null),
      keys: []
    };
  },
  // ...
};
2. 渲染组件时

keep-alive 包裹的组件需要渲染时,会执行以下步骤:

  • 生成组件的键 :根据组件的 nametag 等信息生成一个唯一的键。
  • 检查缓存 :检查 cache 对象中是否已经存在该键对应的组件实例。
    • 如果存在(命中缓存) :从 cache 中取出该组件实例,并将其对应的键移动到 keys 数组的末尾,表示该组件是最近使用的。然后直接使用缓存的组件实例进行渲染,跳过组件的创建和挂载过程。
    • 如果不存在(未命中缓存) :正常创建和挂载该组件实例,并将其缓存到 cache 对象中,同时将对应的键添加到 keys 数组中。如果 keys 数组的长度超过了 max 属性指定的最大缓存数量(如果设置了 max),则会移除 keys 数组中最旧的键对应的组件实例,以释放缓存空间。

以下是简化的渲染逻辑代码示例:

javascript 复制代码
render() {
  const vnode = getFirstComponentChild(this.$slots.default); // 获取第一个子组件
  const componentOptions = vnode && vnode.componentOptions;
  if (componentOptions) {
    const key = vnode.key == null
      ? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
      : vnode.key;
    if (this.cache[key]) {
      // 命中缓存
      vnode.componentInstance = this.cache[key].componentInstance;
      // 将键移动到 keys 数组末尾
      remove(this.keys, key);
      this.keys.push(key);
    } else {
      // 未命中缓存
      this.cache[key] = vnode;
      this.keys.push(key);
      // 检查是否超过最大缓存数量
      if (this.max && this.keys.length > parseInt(this.max)) {
        pruneCacheEntry(this.cache, this.keys[0], this.keys, this._vnode);
      }
    }
  }
  return vnode;
}
3. 组件销毁时

keep-alive 包裹的组件被移除时,由于组件被缓存了,并不会真正销毁,而是进入一种"停用"状态。此时,组件的 deactivated 生命周期钩子会被调用。当再次渲染该组件时,会进入"激活"状态,组件的 activated 生命周期钩子会被调用。

总结

keep-alive 通过维护一个缓存对象和键数组,实现了组件的缓存和复用。在组件渲染时,优先从缓存中获取组件实例,避免了重复创建和销毁,同时利用 activateddeactivated 生命周期钩子来处理组件的激活和停用状态,从而提升了应用的性能和用户体验。

相关推荐
吃着火锅x唱着歌43 分钟前
LeetCode 1537.最大得分
算法·leetcode·职场和发展
零千叶1 小时前
【面试】RabbitMQ 常见问题
面试·职场和发展·rabbitmq
weixin_584121431 小时前
vue3+ts导出PDF
javascript·vue.js·pdf
要做朋鱼燕1 小时前
【C++】 priority_queue 容器模拟实现解析
开发语言·c++·笔记·职场和发展
做就对了66662 小时前
驱动员工的核心:少谈“大道理”,多解“人心”
职场和发展·职场·管理·团队管理·销售
尚学教辅学习资料2 小时前
Ruoyi-vue-plus-5.x第五篇Spring框架核心技术:5.1 Spring Boot自动配置
vue.js·spring boot·spring
给月亮点灯|2 小时前
Vue基础知识-脚手架开发-使用Axios发送异步请求+代理服务器解决前后端分离项目的跨域问题
前端·javascript·vue.js
围巾哥萧尘3 小时前
Anthropic Claude for Chrome🧣
面试
要记得喝水4 小时前
C#某公司面试题(含题目和解析)--1
开发语言·windows·面试·c#·.net
墨染点香4 小时前
LeetCode 刷题【61. 旋转链表】
算法·leetcode·职场和发展