keep-alive使用

当不停的在列表页和详情页来回切换时，当每次从详情页退回到列表页，列表组件会重新发出ajax请求，列表组件上的数据不会在短短几分钟就更新，没必要每次都发送请求。这样会降低用户体验

keep-alive用法

是vue的内置组件，能在组件切换过程中将状态保存在内存中，防止重复渲染DOM

<keep-alive>
	<router-view></router-view>
	<!-- 这里是会被缓存的组件  -->
</keep-alive>

本例是使用了vue-router的，所以这里的keep-alive中放了一个router-view。
这是最简单的用法，这样会使所有在vue-router中渲染的组件，全部都将状态保留在内存。
若是缓存部分组件的状态，可以使用keep-alive的include属性。

<keep-alive include="productsList,addressList">
	<router-view></router-view>
</keep-alive>

只缓存productsList和addressList这2个列表组件的数据。
然后，必须在需要被缓存状态的组件的script部分，给组件添加一个name属性。

<template>

</template>
<script>
	export default{
		name:"productsList",  // 如果使用了keep-alive缓存该组件状态，则此组件必须有这个属性
		data(){
			return{}
		}
	}
</script>

如果没有使用keep-alive缓存状态的组件，可以不写这个属性name:“productsList”。但是如果使用了keep-alive缓存该组件状态，则此组件必须有这个属性。并且，这个属性的值，还必须跟标签中include属性的值完全一致，包括大小写。