Vue：keep-alive的用法总结_keepalive :max="10-优快云博客

什么时候用到keep-alive

如果没有缓存，每点击一次导航，内容区就会创建一个组件，该组件会经历整个生命周期，每点击一次，就会创建一个组件，比较浪费性能，
这时，我们就要考虑到是否能将点击过的已创建的组件进行缓存，当再次点击已访问过的组件时，这时，就会从缓存中获取该组件，而不会重新创建，这就用到keep-alive

Props：
include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
max - 数字。最多可以缓存多少组件实例。

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。主要用于保留组件状态或避免重新渲染。
当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

 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>

匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。

keep-alive对应两个生命周期, activated(){} deactivated(){}
当从缓存中读取a组件时，此时a组件处于活跃状态，
当从缓存中读取b组件时，a组件处于缓存状态，此时b组件处于活跃状态，
用途：
例如: 当在a组件浏览小说到某个位置，这时，我切换到b组件，那么就用a组件的缓存状态函数（ deactivated ）记录这个位置，
当我再次切换到a组件，用活跃状态函数（ activated ）回到该位置

activated() {
  console.log("活跃状态");
},

deactivated() {
  console.log("缓存状态")
}

最多可以缓存多少组件实例。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。

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

复杂情况可以使用: meta配合keepalive

export default [
  {
  path:'/',
  name:'home',
  components:Home,
  meta:{
    keepAlive:true //需要被缓存的组件
  },
  {
  path:'/book',
  name:'book',
  components:Book,
  meta:{
    keepAlive:false //不需要被缓存的组件
  }
]


<keep-alive>
  <!--这里是会被缓存的组件-->
  <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>

<!--这里是不会被缓存的组件-->
<router-view v-if="!$route.meta.keepAlive"></router-view>