Vue.js的keep-alive用法
一、问题提出
在我们用Vue.js做移动端开发的时候，经常会遇到这样的应用场景：
首先，让用户看到新闻列表；然后点击新闻标题，切换到新闻详情的组件，以展示新闻详情。
很多应用场景都于此类似，比如先进入商品列表，点击某一个商品条目，则切换到商品详情的组件。
这种场景往往会碰到一个问题，当我每一次从详情组件退回到列表组件的时候，列表组件会重新发出ajax请求。考虑到下面2条原因，总觉得这么不好。
1.列表组件上的数据不会在短短几分钟之内就更新，完全没必要每次都发出ajax请求。这样势必降低用户体验
2.浪费移动设备的流量。（如果流量无限，这条可以无视）
总之，即使只有第1条原因，我们也应该不让它每次退回到列表页的时候都重新发出ajax请求。
如何解决这个问题？
可以使用Vue.js自带的keep-alive
二、keep-alive用法
是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。
它使用的时候非常简单，示例代码如下：
<keep-alive>
<router-view></router-view>
<!--这里是会被缓存的组件-->
</keep-alive>这里需要说明的是，本示例是使用了vue-router的，所以这里的keep-alive中放了1个router-view。
这是最简单的用法。这样会使所有在vue-router中渲染的组件，全部都将状态保留在内存。
如果你只想缓存部分组件的状态。那么可以使用keep-alive的include属性。
例如，我们有组件newsList和newsInfo，imageList和imageInfo，但是我们只想缓存newsList和imageList这2个列表组件的数据。那么可以这么使用
<keep-alive include="newsList,imageList">
<router-view></router-view>
</keep-alive>然后还有一步，你必须在需要被缓存状态的组件的script部分，给组件添加一个name属性。例如：
以newsList.vue组件为例
<template>
<!-- 这里是newslist组件的html结构部分 -->
</template>
<script>
export default {
name: "newsList", //如果使用了keep-alive缓存该组件状态，则此组件必须有这个属性。
data(){
return {}
}
</script>需要说明的是，如果没有使用keep-alive缓存状态的组件，可以不写这个属性。但是如果使用了keep-alive缓存该组件状态，则此组件必须有这个属性。并且，这个属性的值，还必须跟<keep-alive>标签中include属性的值完全一致，包括大小写。