1. keep-alive 简述

keep-alive是vue中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM
keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们
keep-alive可以设置以下props属性：

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

2. 用法

当我们在某些场景下不需要让页面重新加载时，我们可以使用keepalive

在路由中设置 keepAlive 属性判断是否需要缓存

关于keep-alive的基本用法：

<keep-alive include="a,b">
  <component />
</keep-alive>

// 数组、正则使用 v-bind
<keep-alive :include="['a','b']">
  <component />
</keep-alive>

<keeep-alive> 要求被切换到的组件有自己的名字，这个 name 指的是 router 中的，建议将 router 与 component 的 name 设成一样

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

设置了 keep-alive 缓存的组件，会多出两个生命周期钩子（activated与deactivated）

• 首次进入组件时：beforeRouteEnter > beforeCreate > created> mounted > activated > ... ... > beforeRouteLeave > deactivated

• 再次进入组件时：beforeRouteEnter >activated > ... ... > beforeRouteLeave > deactivated

刷新数据：
1）每次组件渲染的时候，都会执行beforeRouteEnter

beforeRouteEnter(to, from, next) {
  next(val=> {
    val.getData()    // 获取数据
  })
}

2）在 keep-alive 缓存的组件被激活的时候，都会执行 actived

actived() {
  this.getData()  // 获取数据
}

转载于：https://juejin.cn/post/7176103887445688379