缓存组件

<KeepAlive>

内置组件

多个组件间动态切换时，默认情况下，组件被替换掉 | unmount，再次回来时，状态被挂载onmount，并重新初始化，类似于 v-if 的执行

特定情况下，当组件恢复时，为了继续使用其状态 - 恢复现场，需要缓存 | 保留被移除的组件实例；同：函数的执行、调试断点

使用 <KeepAlive> 内置组件缓存组件；默认会缓存内部的所有组件实例；可以使用属性 include 和 exclude 属性定制缓存行为

还可以使用属性 max 指定最大缓存组件数

各管理平台的标签页应用

更多信息，请访问官方文档 - KeepAlive

缓存组件属性
属性	说明
include	需要缓存的组件
exclude	不需要缓存的组件
max	最大缓存组件数

<template>
    <KeepAlive>
        <component :is="tabs[currentTab]"></component>
    </KeepAlive>
</template>

钩子函数

缓存实例的生命周期；更多生命周期函数，请查看生命周期函数 - Lifetime

组件缓存后而仍作为组件树的一部分时，它将变为不活跃状态而不是被卸载

1. onActivated()

注册一个回调函数，若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用

2. onDeactivated()

注册一个回调函数，若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用

[] 模拟用户个人中心的标签页，并查看各组件的生命周期函数；详情请参考实操 - 组件综合运用 - 标签页

[] 路由缓存 - 不是简单的使用缓存组件包裹，而应该使用动态组件实现

<RouterView v-slot="{ Component }">
    <transition>
        <keep-alive>
            <component :is="Component" />
        </keep-alive>
    </transition>
</RouterView>