vue内置组件 之 状态保持 keep-alive的 使用

1. **使用场景：

** 当有一个页面组件，需要加载和请求较多的数据，页面渲染的内容可能比较复杂，那么这个页面加载完毕的话会花费比较多的时间(如2,3秒左右)。
比如从这个A页面切换到了下一个B页面，就会销毁当前页面组件，渲染新的页面组件。下一次重新切换回加载渲染时间比较多的组件A的时候，又会花费2,3秒钟的时间重新进行渲染和加载；这样会降低用户体验度。
组件状态保持就可以解决每次打开页面都需要重新发送请求并且重新渲染的情况

2.使用方法

<keep-alive>
  <component :is="view"></component>
</keep-alive>

做法超级easy，只要用keep-alive标签组件将需要换成的组件包含起来就可以了；缓存不活动的组件实例，不是销毁它们

• 注意点

1. 同时当组件在 内被切换，它的 activated 和 deactivated
   这两个生命周期钩子函数将会被对应执行。

2. 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中

3. 有的时候我们包含的会是或者是的占位符；
   就需要去限制到底哪些组件需要缓存，可以通过include属性来设置包含，或者exclude属性来设置排除。

Props：

• include - 字符串或正则表达式。只有名称匹配的组件会被缓存。

• exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。

• max - 数字。最多可以缓存多少组件实例。

<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>`

• max

 - `<keep-alive :max="10">
  <component :is="view"></component>
</keep-alive>`

注： 设置最大只能缓存10个组件，如果超过了10个组件，则在缓存中移除使用最少的那个