对 keep-alive 的了解

keep-alive

• <keep-alive> 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。
• <keep-alive> 生命周期钩子函数：activated、deactivated
  • 使用会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在 activated 阶段获取数据，承担原来 created 钩子中获取数据的任务。
  • 被包含在 中创建的组件，会多出两个生命周期的钩子: activated 与 deactivated
  • activated ：在组件被激活时调用，在组件第一次渲染时也会被调用，之后每次 <keep-alive> 激活时被调用。
  • deactivated ：在组件被停用时调用。
  • 注意：只有组件被 <keep-alive> 包裹时，这两个生命周期才会被调用，如果作为正常组件使用，是不会被调用，以及在 2.1.0 版本之后，使用 exclude 排除之后，就算被包裹在 <keep-alive> 中，这两个钩子依然不会被调用！另外在服务端渲染时此钩子也不会被调用的。
  • 什么时候获取数据？
    • 当引入 <keep-alive> 的时候，页面第一次进入，钩子的触发顺序 created => mounted => activated ，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated。
• <keep-alive> 的 props ：
  1. include:定义缓存白名单，会缓存名单里面的组件
  2. exclude:定义缓存黑名单，被命中的组件不会被缓存
  3. max:定义缓存组件的上限

<keep-alive include='include_components' exclude='exclude_components'>
  <component>
    <!-- 该组件是否缓存取决于include和exclude属性 -->
  </component>
</keep-alive>

• include - 字符串或正则表达式，只有名称匹配的组件会被缓存
• exclude - 字符串或正则表达式，任何名称匹配的组件都不会被缓存
• include 和 exclude 的属性允许组件有条件地缓存。二者都可以用“，”分隔字符串、正则表达式、数组。当使用正则或者是数组时，要记得使用v-bind` 。

<!-- 逗号分隔字符串，只有组件a与b被缓存。 -->
<keep-alive include="a,b">
  <component></component>
</keep-alive>
 
<!-- 正则表达式 (需要使用 v-bind，符合匹配规则的都会被缓存) -->
<keep-alive :include="/a|b/">
  <component></component>
</keep-alive>
 
<!-- Array (需要使用 v-bind，被包含的都会被缓存) -->
<keep-alive :include="['a', 'b']">
  <component></component>
</keep-alive>