vue中keep-alive组件的入门使用教程

vuex里获取列表数据：
GET_COLLECTION_LIST(state, val) { state.collectionList = state.collectionList.concat(val)}

歌曲列表里created获取数据，mounted监听滚动事件滚动加载，destroyed取消监听：
created(){ this.collectionListMethod({limit: this.limit, offset: this.offset})},
mounted(){ window.addEventListener('scroll', this.isScrollBot)}
destroyed(){ window.removeEventListener('scroll', this.isScrollBot)}

专辑列表页返回使用的是 this.$router.go(-1)

首先在歌曲列表路由里添加meta:{keepAlive: true}为后面的router-view是否需要缓存提供标识
{ path: '/songLis', component: SongLis, meta: { keepAlive: true }}
然后在router-view外层添加keep-alive，并根据meta参数判断是否所有路由都需要缓存
<keep-alive>
  <router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"/>

//keep-alive钩子函数，组件恢复时触发
activated(){ window.addEventListener('scroll', this.isScrollBot)},
//keep-alive钩子函数，组件变为不可用时触发
deactivated(){ window.removeEventListener('scroll', this.isScrollBot)}

基本用法：
<keep-alive>
 <component :is="view"></component>
</keep-alive>

也可以根据条件判断：
<keep-alive>
 <comp-a v-if="a > 1"></comp-a>
 <comp-b v-else></comp-b>
</keep-alive>
这个时候触发两个组件切换时，组件内的数据和状态都会得到保存，如果有input输入框，输入框内容会保留

<keep-alive include="a,b">
 <component :is="view"></component>
</keep-alive>
此时只有a、b两个组件会触发keep-alive，此处的名字是组件内部name对应名字，如果name不存在，会查找父组件里components里注册的名字，如果也不存在则不会匹配。
正则和数组方法同上，但是需要用v-bind:include=''方式。

<keep-alive :max="10">
 <component :is="view"></component>
</keep-alive>