之前在《Vue一个案例引发的动态组件与全局事件绑定总结》这篇文章中简单提到过组件的缓存。当时只是简单的提供了一个解决问题的思路，并没有说到多少组件缓存的东西，今天我们就来详细说说组件的缓存。
组件化开发模式下，我们会把整个项目拆分成很多组件，然后按照合理的方式组织起来。
自然就存在组件之间的切换问题，Vue 中有个「动态组件」的概念，它能够让我们更好的实现组件的切换。
在实际的项目开发中，产品是不可能放过我们的，需求总是在不停的变化，如果你碰到那些不改需求的产品就嫁了吧，太难得了。
最近项目中需要实现一个保留上一次Tab 页的功能。如下图，当我选择 B 组件时，我希望从首页切换到设置页时，还会停留在 B 组件，而不是重新渲染为默认的 A 组件。
首先我们可以使用内置组件
这时，我们做到了两个组件之间的切换，但动态组件在切换的过程中，组件的实例都是「重新创建」的，而我们需要保留组件状态。
为了解决这个问题，你还需要使用 vue 内置组件
keep-alive 包裹「动态组件」时，会缓存不活动的组件实例，而不是销毁它们。它是一个抽象的组件，它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。
值得注意的是 「动态组件」这四个字，它只有在包含动态组件时，才会产生效果。如果不是动态组件则会无效。比如下面这种用法是没有效果的。
既然如此，我们来看看 keep-alive 常用的几种方式：
方案一： 使用内置组件
方案二： 当出现条件判断时的子组件
方案三： 结合路由使用时
以上三种方式组件都会被缓存。另外一点需要注意的是，
明白了如何使用
但是这里你会发现，我们把每一个组件都缓存了起来，不仅案例中的「设置页」被缓存连「首页」也一起被缓存了起来，这不是我们想要的。
vue 帮我们也考虑到了这一点，所以我们可以选择性的进行组件的缓存，也就是说你想让谁缓存，就让谁缓存，非常的自由与可配置。
原因是因为
- include：只有名称匹配的组件会被缓存。
- exclude：任何名称匹配的组件都不会被缓存。
二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。
所以，结合
这样我们就可以只缓存「设置页」，然后实现保留上次选择的 Tab 页。
欢迎公众号：六小登登，与我一起交流。
