<KeepAlive> 组件的学习

当我们希望某个组件被切换时它的数据被缓存，我们可以使用Vue提供的<KeepAlive>组件

基本使用

 <KeepAlive>
    <component :is="curent" />
  </KeepAlive>

当 curent的值被改变时组件切换

过滤组件

<KeepAlive> 默认会缓存内部的所有组件实例，但我们可以通过 include 和 exclude prop 来定制该行为。这两个 prop 的值都可以是一个以英文逗号分隔的字符串、一个正则表达式，或是包含这两种类型的一个数组

 <KeepAlive exclude="B">
    <component :is="curent" />
  </KeepAlive>

B组件不会被缓存，它的数据每次切换会被清空，重新挂载

include, exclude 可传递的类型如下(当传递正则或数组时需要v-bind)：

type MatchPattern = string | RegExp | (string | RegExp)[]

最大缓存实例数

我们可以通过传入 max prop 来限制可被缓存的最大组件实例数。<KeepAlive> 的行为在指定了 max 后类似一个 LRU 缓存：如果缓存的实例数量即将超过指定的那个最大数量，则最久没有被访问的缓存实例将被销毁，以便为新的实例腾出空间。

生命周期

onActivated(() => { 
  // 调用时机为首次挂载 
  // 以及每次从缓存中被重新插入时 
}) 
onDeactivated(() => { 
  // 在从 DOM 上移除、进入缓存 
  // 以及组件卸载时调用 
})