• 缓存组件
• 频繁切换，不需要重复渲染
• Vue 常见性能优化之一

  演示

  先演示不用keep-alive

  子组件1，2，3

  ```vue

![截屏2020-10-17 下午4.04.24.png](https://cdn.nlark.com/yuque/0/2020/png/1670861/1602921871275-f3b60035-958e-4881-90a3-a88fc4ddb378.png#align=left&display=inline&height=388&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2020-10-17%20%E4%B8%8B%E5%8D%884.04.24.png&originHeight=388&originWidth=776&size=72824&status=done&style=stroke&width=776)<br />可以发现，组件的不停切换，组件本身也在不停的创建和销毁。如何子组件本身非常大，这样是很消耗资源的。
我们使用keep-alive<br />修改父页面的这部分
```vue
<template>
  <div>
    <button @click="show='A'">A</button>
    <button @click="show='B'">B</button>
    <button @click="show='C'">C</button>
    <keep-alive>
      <ka1 v-if="show === 'A'" />
      <ka2 v-if="show === 'B'" />
      <ka3 v-if="show === 'C'" />
    </keep-alive>
  </div>
</template>

不管如何切换，都只挂载了一次。