Vue keep-alive缓存标签

前端

梗概

• 只要一直渲染<keep-alive>标签，缓存就会存在
• 直接子标签必须要是Vue 动态组件才生效

适用范围:

1. 作用:

1. <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
2. 主要用于保留组件状态或避免重新渲染。
   1. 提升切换组件的性能

2. 不适用场景:

1. <keep-alive> 不会在函数式组件中正常工作，因为它们没有缓存实例。

语法:

<keep-alive include="包含的过滤条件" exclude="排除的过滤体条件" max="缓存的组件最大数目">
  <component :is="view"></component>
</keep-alive>

1. include和exclude都是可省的
2. 过滤条件可以是正则表达式, 逗号分隔的多个字符串, 多个字符串组成的数组
3. max是可省的

说明:

1. 当组件在 <keep-alive> 内被切换时，它的 mounted 和 unmounted 生命周期钩子不会被调用
2. 取而代之的是 activated 和 deactivated。(这发生在 <keep-alive> 的所有后代标签)

实例:

<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>
<!-- regex (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>
<!-- Array (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>
 
<!-- 缓存中最多存储10个组件,优先自动清理最旧的组件 -->
<keep-alive :max="10">
  <component :is="view"></component>
</keep-alive>