Vue中keep-alive的理解和使用

什么是keep-alive?
在平常开发中，有部分组件没有必要多次初始化，这时，我们需要将组件进行持久化，使组件的状态维持不变，在下一次展示时，也不会进行重新初始化组件。
也就是说，keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染 。也就是所谓的组件缓存。
（在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性）

使用场景
在使用Vue开发单页面应用时，我们通常会使用Vue-Router进行页面导航，Vue-Router在进行路由切换的时候，页面是会重新加载，对应的生命周期函数也会再次执行一遍，但是在有些业务场景下，
比如：
在有分页数据列表中，切换到第三页需要查看列表对应数据的详情页面，然后返回，如果不加任何处理，列表页面会重新加载，默认显示第一页数据，而不在是之前的第三页，这样如果还需要查看之前查看数据的下一条时，还需要切换到第三页，如此反复。
在列表页面进行条件筛选查询，查询到对应的数据后查询详情，跳转详情页面，然后在返回，列表默认会清空查询条件，显示所有数据。
以上两种情景都会带来很不好的用户体验。此时，就需要对列表页面进行路由缓存。在Vue-Router中可以使用keep-alive进行路由页面缓存。

keep-alive基本认识
Vue中提供了一个内置组件keep-alive，使用元素将动态组件包裹起来，内部组件就会被缓存起来。
/被keep-alive包含的组件会被缓存

<keep-alive>
    <component />
</keep-alive>
<keep-alive>

包裹的组件，加载过的页面，再次进入时，不会被再次初始化，也就意味着不会执行页面第一次进入时的部分生命周期函数。
但是有时候是希望我们缓存的组件可以能够再次进行渲染，这时Vue为我们解决了这个问题
被包含在<keep-alive>中创建的组件，会新增两个生命周期的钩