前端：keepAlive数据缓存组件及参数讲解和应用场景

概要

提示：往往我们在使用成熟的开源框架时，会发现有很多优秀的功能，值得我们思考，我们往往局限于常规应用，而忽略了技术本身切实的本质

例如：

简单的实例：当我们做一个标签页，自由切换页面，是如何实现的呢？你可能会说，不就是点击切换，这有什么难的呢？事实是这样吗？less talk show me code
答案：不是，当我们加载数据后，作为标签，来回切换（类似的菜单，我们点击某个菜单，在另一侧就该看到实时的内容），但是有时就是白屏。
话不多说，先来分析一下：
想一下
切换，我们首先会想到，可以用
v-if
v-show

切换按钮

<button @click=“!flag”>切换按钮</button>
<exp-a v-if=“flag”></exp-a>
<exp-b v-else></exp-b>

不需要复现，当前切换组件时，页面重新渲染，v-if，v-else来切换，那么就会出现数据重新初始化。
但是如果你要是用v-show 就可以保留上一次输入的内容。
因为v-show是这些组件dom同时渲染到当前页面，而v-if是决定是否有这个dom。所以v-show不存在上述问题。只有v-if存在这个组件切换，修改后的数据切换变为初始化的问题。初始化后，就会白屏的问题。

但是有的同学很倔强，就是想用v-if，就不用v-show,认为v-show会拖累页面加载速度。可不可以？

再深入的思考一下
是不是还可以用缓存技术，就是把组件缓存起来，是可以的。
可以用 keep-alive组件，这个缓存功能的组件用起来也很简单就是，想缓存哪就把哪个组件包在里面即可。
简单的例子：

  <el-button type="primary" @click="flag = !flag">切换组件</el-button>
  <KeepAlive>
    <exp-a v-if="flag"></exp-a>
    <exp-b v-else></exp-b>
  </KeepAlive>

keepAlive有个特点，就是只能含有一个根组件，那么上述，用的v-if和v-else明显最终只有一个组件 a或b.
如果此时你用v-show ,那么此时就有两个child node ,a，b。这对于keepAlive是不允许。

  <el-button type="primary"