vue keep-alive

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。也就是所谓的组件缓存
<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。
prop:
include: 字符串或正则表达式。只有匹配的组件会被缓存。
exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。

keep-alive的声明周期执行

页面第一次进入，钩子的触发顺序
created-> mounted-> activated，
退出时触发 deactivated
当再次进入（前进或者后退）时，只触发 activated

事件挂载的方法等，只执行一次的放在 mounted 中；组件每次进去执行的方法放在 activated 中；

基本用法

<!--被keepalive包含的组件会被缓存-->
<keep-alive>
    <component><component />
</keep-alive>

注意：

踩坑：keep-alive匹配的是组件内的name，不是路由的name！

被keepalive包含的组件不会被再次初始化，也就意味着不会重走生命周期函数
Vue 为我们解决了这个问题
被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子: activated 与 deactivated：
activated： 当 keepalive 包含的组件再次渲染的时候触发（首次渲染的时候也被触发了）
deactivated ：当 keepalive 包含的组件销毁的时候触发

参数理解：

keepalive 可以接收3个属性做为参数进行匹配对应的组件进行缓存:

include 包含的组件(可以为字符串，数组，以及正则表达式,只有匹配的组件会被缓存)
exclude 排除的组件(以为字符串，数组，以及正则表达式,任何匹配的组件都不会被缓存)
max 缓存组件的最大值(类型为字符或者数字,可以控制缓存组件的个数)

<!-- 将（只）缓存组件name为a或者b的组件, 结合动态组件使用 -->
<keep-alive include="a,b">
  <component></component>
</keep-alive>

<!-- 组件name为c的组件不缓存(可以保留它的状态或避免重新渲染) -->
<keep-alive exclude="c"> 
  <component></component>
</keep-alive>

<!-- 使用正则表达式，需使用v-bind -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 动态判断 -->
<keep-alive :include="includedComponents">
  <router-view></router-view>
</keep-alive>

<!-- 如果同时使用include,exclude,那么exclude优先于include， 下面的例子只缓存a组件 -->
<keep-alive include="a,b" exclude="b"> 
  <component></component>
</keep-alive>

<!-- 如果缓存的组件超过了max设定的值5，那么将删除第一个缓存的组件 -->
<keep-alive exclude="c" max="5"> 
  <component></component>
</keep-alive>

如果只想要router-view里面的某个组件被缓存，怎么办？

使用 include/exclude
缺点：需要知道组件的 name，项目复杂的时候不是很好的选择
使用 meta 属性
优点：不需要例举出需要被缓存组件名称

<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello,
      meta: {
        keepAlive: false // 不需要缓存
      }
    },
    {
      path: '/page1',
      name: 'Page1',
      component: Page1,
      meta: {
        keepAlive: true // 需要被缓存
      }
    }
  ]
})

活用：

若有需求要求从特定组件跳转到某组件时缓存内容，否则不缓存，可以结合路由导航守卫，更改to或者from参数的属性

注意事项：

1.keep-alive 先匹配被包含组件的 name 字段，如果 name 不可用，则匹配当前组件 components 配置中的注册名称。
2.keep-alive 不会在函数式组件中正常工作，因为它们没有缓存实例。
3.当匹配条件同时在 include 与 exclude 存在时，以 exclude 优先级最高。
4.包含在 keep-alive 中，但符合 exclude ，不会调用 activated 和 deactivated。

部分内容参考链接：https://juejin.cn/post/6844903919273918477