Vue -- 谈谈你对 keep-alive 的了解？

keep-alive 是系统自带的一个组件

主要用于保留组件状态或避免重新渲染（提升性能）。

Props：

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

  <!-- 逗号分隔字符串 -->
  <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>

用法：

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

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

注意：使用 include 和 exclude 属性时，缓存组件的名称 name 一定要赋值，否则无法识别到对应的路由组件。

具体实现比如：首页进入详情页，如果用户在首页点击都是相同的，那么详情页就没有必要请求N次了，直接存起来就可以了，当然如果点击的不是同一个，那么就直接请求；列表进入详情页，详情页返回列表页，列表页不重新请求数据，保留之前的数据和滚动位置。

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

<!-- 多个条件判断的子组件 -->
<keep-alive>
  <comp-a v-if="a > 1"></comp-a>
  <comp-b v-else></comp-b>
</keep-alive>

<!-- 和 `<transition>` 一起使用 -->
<transition>
  <keep-alive>
    <component :is="view"></component>
  </keep-alive>
</transition>

<!-- 结合Router 缓存部分页面 $route.meta.keepAlive 选项 -->
<keep-alive>
   <router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" />

<router-view v-slot="{ Component }">
   <keep-alive>
      <component :is="Component"></component>
   </keep-alive>
</router-view>

Vue -- 谈谈你对 keep-alive 的了解？

公告