"keep-alive的作用是什么?"

1、是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重负渲染DOM。

<keep-alive>
  <component>
    <!-- 该组件将被缓存！ -->
  </component>
</keep-alive>

2、keep-alive有include和exclude两个属性，可以指定哪些组件需要被缓存，哪些组件不需要被缓存
3、与router-view组件配合使用，如果直接被<keep-alive>包裹，所有路径匹配到的视图组件都会被缓存

<keep-alive>
  <router-view>
    <!-- 所有路径匹配到的视图组件都会被缓存！-->
  </router-view>
</keep-alive>

如果指向 <router-view> 里面的某个组件被缓存，需要增加 router.meta 属性

const router = new VueRouter({
  routes: [
    {
      path: '/home',
      name: 'Home'，
      component: Home,
      meta: {
        keepAlive: true // true：需要被缓存，false：不需要被缓存
      }
    }
  ]
})

<keep-alive>
  <router-view v-if="$route.meta.keepAlive">
    <!-- 被缓存的视图组件！-->
  </router-view>
</keep-alive>

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