【vue高频面试题—基础篇】vue 对keep-alive的理解 它的原理是什么 具体缓存的什么

1. 对keep - alive的理解

   • 功能概述：在 Vue 中，keep - alive是一个内置组件，用于缓存组件的切换。它能够避免组件在切换过程中被频繁地销毁和重新创建，从而提高应用的性能和用户体验。例如，在一个多标签页的应用场景中，当用户在不同标签页之间切换时，使用keep - alive可以使标签页对应的组件保持其状态，而不是每次切换都重新初始化组件。
   • 使用场景：适用于那些有状态的组件，并且这些组件在频繁切换显示时不希望丢失其内部状态。比如一个包含表单输入的组件，如果不使用keep - alive，每次切换离开再返回时，表单中的输入内容会丢失，使用keep - alive后，输入的内容可以被保留。

2. 原理

   • 基于虚拟 DOM 的缓存机制：keep - alive通过在虚拟 DOM 层面进行操作来实现缓存。当一个组件被包裹在keep - alive中时，Vue 会在内存中为这个组件创建一个缓存对象。在组件初次渲染后，其虚拟 DOM 会被存储在这个缓存对象中。
   • 生命周期钩子的影响：keep - alive会改变组件的生命周期。被keep - alive包裹的组件，在初次挂载时会正常执行mounted生命周期钩子。但是当组件被切换离开（从显示状态变为隐藏状态）时，不会执行destroyed生命周期钩子，而是执行deactivated钩子；当组件再次被切换回来（从隐藏状态变为显示状态）时，会执行activated钩子，而不是重新执行mounted钩子。
   • 缓存的更新与维护：Vue 会根据组件的key属性来识别和管理缓存。如果组件的key发生变化，Vue 会重新创建一个新的缓存对象来存储这个组件的虚拟 DOM，这也意味着旧的缓存会被清除。例如，在一个列表组件中，每个列表项是一个动态组件，并且使用keep - alive包裹，当列表项的key（可能是根据列表项的唯一标识生成）改变时，对应的组件缓存会相应更新。

3. 具体缓存的内容

   • 组件的实例状态：包括组件内的数据属性（data）的值。例如，一个组件中有一个计数器count，在组件被缓存后，count的值会被保留，下次切换回来时，count还是之前的值。
   • DOM 状态：组件对应的 DOM 结构和样式信息会被缓存。例如，组件中的输入框的内容、滚动条的位置等 DOM 相关的状态都会被保存。
   • 计算属性和方法的引用关系：计算属性和方法虽然在每次访问时会重新计算或执行（如果有依赖变化），但它们与组件的引用关系会被保留。也就是说，组件缓存后，这些计算属性和方法还是可以正常访问和使用，并且其内部的逻辑关系（如计算属性依赖的数据关系）不会因为缓存而丢失。

较大概率引出下面的追问：

如何保存页面当前的状态？

1、 使用keep - alive组件 或 Vuex/Pinia（适用于组件切换场景）

2、利用浏览器本地存储（localStorage或sessionStorage）（适用于页面刷新等场景）