Vue---keep-alive组件的使用，缓存组件

keep-alive

1. 组件作用

主要用于保留组件状态或避免重新渲染。

2. 参数说明

• include 字符串，数组或正则表达式。只有名称匹配的组件会被缓存。
• exclude 字符串，数组或正则表达式。任何名称匹配的组件都不会缓存。
• max 数字。最多可以缓存多少组件实例。
• -----------------------------------------------------
• 除此之外，keep-alive还提供了两个的生命周期钩子函数

• actived: 在激活的时候的使用，第一次激活实在mounted之后执行

• dectived:在失活的时候使用。

3. 组件介绍

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

当组件在< keep-alive >内切换，它的 activated 和 deactived 这两个生命周期钩子函数将会被对应执行。

4. 实例说明

    <component />  //需要缓存的组件
<keep-alive include="a,b">
  <component :is="view">component>
keep-alive>
<keep-alive :include="/a|b/">
  <component :is="view">component>
keep-alive>
<keep-alive :include="['a', 'b']">
  <component :is="view">component>
keep-alive>
<keep-alive include="a,b"> 
  <component />
keep-alive>
-------------------------------------------

5. 使用时可能遇到的问题

• 当引入keep-alive 的时候，页面第一次进入，钩子的触发顺序created> mounted> activated，
  退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated。

  注意：我们知道 keep-alive 之后页面模板第一次初始化解析变成HTML片段后，
  再次进入就不在重新解析而是读取内存中的数据，即，只有当数据变化时，
  才使用VirtualDOM进行diff更新。
  有需要的话，页面进入的数据获取应该在activated中也放一份。
  数据下载完毕手动操作DOM的部分也应该在activated中执行才会生效。
   
  所以，有需要的话，应该activated中留一份数据获取的代码，或者不要created部分，
  直接将created中的代码转移到activated中。
  

• 匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。
• 不会在函数式组件中正常工作，因为它们没有缓存实例。
• 最多可以缓存多少组件实例。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。