白狗子的博客

「天上浮云如白衣,斯须改变如苍狗。」——杜甫

Vue-面试-keep-alive

2026年10月16日·Admin·1 次浏览

面试题:keep-alive 是什么?缓存了什么?

作用

包裹动态组件或 router-view 时,不销毁被切换走的组件实例,而是缓存在内存中,再次显示时直接激活,保留 组件状态(data、滚动位置等)并跳过重复 created(但会走 activated / deactivated)。

常用 API

  • include / exclude:字符串、正则或数组,按组件 name 匹配是否缓存。
  • max:最多缓存实例数,LRU 淘汰最久未用。

生命周期钩子(被缓存的组件)

  • activated:从缓存切入前台。
  • deactivated:切入后台进入缓存。

注意点

  1. 要求被缓存组件有 明确的 name(与 include 一致)。
  2. 内存占用:缓存过多大组件可能影响性能,配合 max。
  3. 与 路由 meta 结合可做「某页缓存、某页不缓存」。

© 2025 My Blog. Built with Nuxt.js v4