1.Vue keep-alive 原理 面试笔记
一、灵魂问题：为什么 keep-alive 不会重复创建 / 销毁组件？
第一层：本质是什么（源码级一句话）
keep-alive 是 Vue 内置的抽象组件，它不会渲染成真实 DOM，只负责做组件实例缓存，避免组件反复创建 / 销毁，从而提升性能。
二、核心原理：缓存机制（面试满分答案）
底层实现
-
内部用
Map对象缓存组件实例，通过组件的key匹配缓存。 -
命中缓存时，直接复用实例，跳过
created/mounted/destroyed等常规生命周期。
渲染逻辑
表格
| 场景 | 执行逻辑 |
|---|---|
| 首次渲染 | 把组件实例存入缓存中 |
| 再次渲染 | 从缓存中直接读取实例，不执行创建逻辑 |
| 离开组件 | 不执行 destroyed，仅标记为 “停用” 状态 |
专属生命周期
-
activated：组件进入缓存并被激活时触发（首次渲染也会触发） -
deactivated：组件离开缓存并被停用时触发
三、关键特性（面试官加分项）
核心属性
表格
| 属性 | 作用 |
|---|---|
| include | 白名单：只有匹配的组件会被缓存（支持字符串、正则、数组） |
| exclude | 黑名单：匹配的组件不会被缓存（优先级高于 include） |
| max | 设置最大缓存数量，超出后按 LRU（最近最少使用）策略 淘汰旧缓存 |
常见使用场景
- 配合 Vue Router 缓存页面，保留表单输入、滚动位置、列表筛选等状态，避免用户重复操作。
一句话总结
keep-alive 是 Vue 提供的组件级缓存方案，通过 Map 存储实例、LRU 控制缓存数量，用 activated/deactivated 替代常规生命周期，实现 “不重复创建 / 销毁” 的性能优化。
2.Vue keep-alive 面试速记卡片
（直接背，面试张口就来）
一、核心定位
keep-alive 是 Vue 内置的抽象组件，不渲染真实 DOM，仅负责缓存组件实例，避免组件重复创建 / 销毁，提升性能。
二、核心原理（缓存机制）
-
底层实现：用
Map存储组件实例，通过key匹配缓存，命中则直接复用。 -
生命周期变化：
-
首次渲染：存入缓存，触发
created/mounted+activated -
再次渲染：复用缓存，不触发
created/mounted，仅触发activated -
离开时：不触发
destroyed，仅触发deactivated
三、专属生命周期
-
activated：缓存组件被激活时触发 -
deactivated：缓存组件被停用时触发
四、关键属性与策略
表格
| 属性 | 作用 |
|---|---|
| include/exclude | 白名单 / 黑名单，精准控制哪些组件被缓存 |
| max | 设置最大缓存数，超出按 LRU（最近最少使用） 淘汰旧缓存 |
五、一句话总结
keep-alive 就是组件的 “缓存池”，通过复用实例、跳过常规生命周期，实现无刷新的页面状态保留与性能优化。
3.图
