剖析 Vue.js 中 keep-alive 的魔幻机制（下）

2024-01-24 18:51:25

上一节，我们以一张流程图开启了对 keep-alive 组件的探索。若您尚未阅读，可参阅以下简要概括。

与普通组件一样，当父组件在创建真实节点时，遇到 keep-alive 组件时，会对其进行初始化和实例化。实例化过程包括执行挂载 $mount，此步骤会执行 keep-alive 内置的钩子函数 created 和 beforeMount。

随后，keep-alive 会根据当前的缓存策略决定是否缓存该组件。如果决定缓存，则在组件首次渲染后，会将其快照信息保存在内存中。当组件被切换到非激活状态时，keep-alive 会将其真实 DOM 从页面中移除，但仍保留其快照信息，以便在组件再次激活时快速恢复。

当组件再次被激活时，keep-alive 会检查其缓存中是否有该组件的快照信息。如果有，则直接从缓存中恢复组件的状态，而无需重新渲染组件。这种机制极大地提高了组件的切换效率，尤其是在组件切换频繁的场景中。

综上所述，keep-alive 组件的运作原理主要基于组件复用和缓存策略。通过缓存组件的状态信息，keep-alive 能够在组件切换时快速恢复其状态，从而提高组件切换的性能。

本节，我们将继续深入探索 keep-alive 组件的魔幻机制，揭秘更多细节。

keep-alive 的缓存策略

keep-alive 组件提供了两种缓存策略：

默认策略： 此策略下，keep-alive 会缓存所有子组件的快照信息。这意味着，当组件被切换到非激活状态时，其所有子组件的状态信息都会被缓存。当组件再次被激活时，所有子组件的状态信息都会被恢复。
include/exclude 策略： 此策略下，keep-alive 可以通过 include 和 exclude 属性指定需要缓存的子组件。include 属性指定需要缓存的子组件，exclude 属性指定不需要缓存的子组件。当组件被切换到非激活状态时，只有满足 include 属性条件的子组件的状态信息才会被缓存。当组件再次被激活时，只有满足 include 属性条件的子组件的状态信息才会被恢复。

这两种缓存策略为开发者提供了灵活的选择。开发者可以根据实际需求，选择最合适的缓存策略。