KeepAlive 缓存组件

是一个内置组件，它的功能是在多个组件间动态切换时，缓存被移除的组件实例。

基本使用

在组件基础章节中，我们已经介绍了通过特殊的元素来实现动态组件的用法：

默认情况下，一个正活跃的组件实例会在切走后被卸载。这会导致它丢失其中所有已变化的状态，当这个组件再次被显示时，只会创建一个带有初始状态的新实例。

在下面的例子中，你会看到两个有状态的组件，A 有一个计数器，而 B 有一个通过v-model同步input框输入内容的文字展示。尝试先更改一下任意一个组件的状态，然后切走，再切回来：

你会发现在切回来之后，之前已更改的状态都被重置了。

在切换时创建新的组件实例通常是有意义的，但在这个例子中，我们的确想要组件能在被“切走”的时候保留它们的状态。要解决这个问题，我们可以用内置组件将这些动态组件包装起来：

包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。在

请注意：

• onActivated在组件挂载时也会调用，并且onDectivated在组件卸载时也会调用。
• 这两个钩子不仅适用于缓存的根组件，也适用于缓存树中的后代组件。

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com