vue单页应用页面缓存方案----纯干货

    公司项目是用vue进行开发，在开发过程中，我们发现一个极差的体验。场景是这样的，我们的产品首页是一个列表，当用户滚动到距离顶部一定的距离，然后点击列表项进入详情再返回的时候列表数据重新加载，且滚动到了顶部，这简直是一个不能忍受的事情。于是准备对我们的项目体验进行优化，从最开始了解的keep-alive着手，用keep-alive包裹router-view这样的结果可以对页面进行内存缓存，结构如下

<keep-alive>
	<router-view></router-view>
</keep-alive>

即写一个顶级路由，这样有一个问题，就是所有通过路由加载的页面都会缓存在内存中，而对某些页面是不需要缓存的。如果不做处理统一缓存在内存中，那么会造成很大的内存开销。于是我们的思路是控制某一些页面，比如列表等缓存在内存中，某一些不用缓存，于是我们的结构变成了以下这样

<transition :name="transitionName">
	<keep-alive>
		<router-view  v-if="$route.meta.keepAlive"></router-view>
	</keep-alive>
</transition>
<transition :name="transitionName">
	<router-view v-if="!$route.meta.keepAlive"></router-view>
</transition>

路由配置

{path: '/', meta: {Home: "Home", keepAlive: true}, component: require('@/components/Home')},

其中transitionName为加载页面时的动画效果名称，这里不涉及到。相比上一段代码，通过对比发现下一段要复杂一些，其中我们通过路由配置中配置的keepAlive来动态的使用的router-view。如果keepAlive:true的时候我们使用keep-alive包裹的router-view，否则我们直接使用router-view进行页面加载，这样就能解决哪些页面需要缓存，哪些不需要缓存的问题了，只需要在配置路由的时候在meta中配置一个keepAlive:true/false即可。然后义务逻辑往往比我们这个更加复杂，虽然不在进行加载数据，页面缓存在了内存中，但是当我们返回的时候，页面并没有保留在离开这个页面时滚动到的位置，这个问题相对比较好解决。解决方式有多种，下面说一下我的解决思路（简单粗暴）。当页面在滚动的时候我们可以通过监听scroll记录一下页面的滚动位置，然后通过一个变量记录滚动的位置，由于页面是缓存在内存中的，所以变量的值一直有效，在我们返回到页面的时候会执行activated方法。这个方法和methods方法平级，在方法中我们只需要控制页面滚动到记录的位置即可。

    activated() {
      if (this.scrollTop) {
        this.$refs.wrapper.scrollTop = this.scrollTop;
      }
    }

通过以上的步骤我们就可以解决比较简单的页面滚动返回时页面状态无法保留的问题了，是否所有都可以满足呢？不幸的是要做好远不止这么简单，下面我们再来思考一种场景，就是用户点击列表进入详情，详情滚动到底部查看评论，在评论项中点击图片进入另一个页面查看评论详情。这个时候就有个问题？这个详情页是否需要缓存？如果不缓存用户从评论详情返回的时候这个详情页会进行数据加载，又滚动到顶部了，这仍然是一个糟糕的体验。可能会觉得简单，再次缓存不就得了？开始我也是这么认为的，这么做的确是可以保留详情的状态，但是当用户从详情返回的时候还需要缓存吗？答案肯定是不能缓存，如果依旧缓存，这增加了内存的开销。所以我们就需要动态的控制这个详情页什么时候进行销毁？

这里页面被缓存之后再次返回会调用deactivated方法，如果我们不需要缓存这个页面，在deactivated方法中调用this.$destroy()方法进行销毁即可。我们通过这样的思路实现了，so easy！！！！然而在页面第一次进入的时候，点击评论进入评论详情页，再返回状态保留了。这一切很ok，当我们再次进入评论详情页返回的时候状态竟然不保留了，从新进入这个详情页也没有用。简直是无力吐槽啊，于是查阅资料，发现尤大大并不推荐我们手动的调用destroy方法进行页面的销毁。而是通过在keep-alive中配置include，include中接收一个数组，数组中包含的组件名则会被缓存，否者会被销毁。比如这样的["home']，此处的home并不是我们在配置路由时候指定的name，而是我们在书写组件是定义的name属性。以下这样的

export default {
    name:"home"
}

这个时候我们的顶级路由书写就变成了以下这样

<transition :name="transitionName">
	<keep-alive  :include="catchPages">
		<router-view v-if="$route.meta.keepAlive"></router-view>
	</keep-alive>
</transition>
<transition :name="transitionName">
	<router-view  v-if="!$route.meta.keepAlive"></router-view>
</transition>

其中catchPages即为你需要缓存的页面name组成的数组，由于这里牵涉到了不同页面的数据交互，所以我们使用vuex来对数据进行统一管理

const store = new Vuex.Store({
  state: {
   catchPages: ["home"]
  },
  mutations: {
    add(state, item) {
      if (state.catchPages.indexOf(item) === -1)
        state.catchPages.push(item);
    },
    remove(state, item) {
      let index = state.catchPages.indexOf(item);
      if(index >0)
        state.catchPages.splice(index, 1)
    },
  },
  actions: {
    add(state, item) {
      state.commit('add', item)
    },
    remove(state, item) {
      state.commit('remove', item)
    }
  },
  getters: {
    catchPages(context) {
      return context.catchPages;
    }
  }
})

在全局初始化vue的时候将store传入即可，catchPages默认有一个元素即首页，首页一直缓存在内存中。后面需要缓存和移除缓存的时候调用store中提供的add和remove，传入组件名字。然后我们在组件内实现如下方法

beforeRouteLeave(to,from,next){
      if(条件){  //这里写下你的条件
        this.remove("shop")
      }
      next();
}

这样我们就可以动态的控制页面是否缓存了。

注：如果目标页面要缓存，在跳转之前应该调用add方法将即将跳转页面的name添加到catchPages中，返回的时候根据条件判断是否移除缓存。如果不移除后果很严重，举个栗子，首页进入详情页你会发现所有详情页都变成你第一次打开的那个详情了。所以不需要的时候移除很重要。切记！切记！

最后：由于这篇文章是我在工作中遇到的问题的一个总结，并不能全面的阐述所遇到的某些知识点，如果有疑问或者我理解错的地方，欢迎在评论区评论指出。