vue中的切换缓存keep-alive

---

前言

每次切换新标签的时候，vue都会去创建新的实例。但是切换的组件的内容，是不会被缓存下来的，再次切换回来还是会进行刷新。
为了解决这个问题，vue缓存keep-alive就出现了。vue中切换缓存分为两种，其一是组件缓存，其二是路由组件缓存。
keep-alive 是vue提供的一个抽象组件，用来对组件进行缓存，从而节省性能。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、组件缓存

<button @click='flag = "testA"'>testA</button>
<button @click='flag = "testB"'>testB</button>

<keep-alive> // 哪里要用到缓存，就在哪个位置外面嵌套keep-alive标签进行了
    <components :is="flag"></components>
</keep-alive>
    
data(){