keep-alive 的应用

keep-alive可以在组件切换时，保存其包裹的组件的状态，使其不被销毁，防止多次渲染。其拥有两个独立的生命周期钩子函数 actived 和 deactived，使用keep-alive包裹的组件在切换时不会被销毁，而是缓存到内存中并执行 deactived 钩子函数，命中缓存渲染后会执行 actived 钩子函数。

keep-alive生命周期

生命周期执行顺序：
　　1、不使用keep-alive的情况：beforeRouteEnter --> created --> mounted --> destroyed
　　2、使用keep-alive的情况：beforeRouteEnter --> created --> mounted --> activated --> deactivated
　　3、使用keep-alive，并且再次进入了缓存页面的情况：beforeRouteEnter -->activated --> deactivated

被keep-alive包裹住的页面都会被缓存，如果想刷新部分内容要启用activated函数，用法同created，activated只有在被keep-alive包裹时会触发，activated函数一进入页面就触发

props

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

// 组件 a
export default {
  name: 'a',
  data () {
    return {}
  }
}

<keep-alive include="a">
  <component>
    <!-- name 为 a 的组件将被缓存！ -->
  </component>
</keep-alive>可以保留它的状态或避免重新渲染

<keep-alive exclude="a">
  <component>
    <!-- 除了 name 为 a 的组件都将被缓存！ -->
  </component>
</keep-alive>可以保留它的状态或避免重新渲染

但实际项目中,需要配合vue-router共同使用

App.vue

<template>
  <div id="app">
    <!-- 路由占位符 -->
    <!-- <router-view></router-view> -->
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive">
        <!-- 这里是会被缓存的视图组件 -->
      </router-view>
    </keep-alive>

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

router -> index.js

const routes = [
  { path: '/', redirect: '/index' },
  { path: '/', redirect: '/home' },
  {
    path: '/home',
    component: HomeLayout,
    children: [
      {
        path: '/home',
        component: Home
      },
      {
        path: '/workingCondition',
        component: () =>
          import(
            /*webpackChunkName:"workingCondition"*/ '../views/workingCondition/index.vue'
          ),
        meta: {
          keepAlive: true // 需要被缓存
        }
      }
    ]
  },
  {
    path: '/reportView',
    component: () => import('../views/other/reportView.vue')
  },
  {
    path: '/todo',
    component: () => import(/*webpackChunkName:"ToDo"*/ '../views/ToDo.vue'),
    meta: {
      keepAlive: true // 需要被缓存
    }
  }
]

参考：vue中keep-alive的使用及详解_半度℃温热-CSDN博客_keep-alive