四十二、Vue中使用keep-alive优化网页性能

问题一：

  如上图所示，当我们在使用路由在首页和城市列表页之间进行切换时，它会反复访问 index.json（首页数据） 和 city.json（城市列表页数据），而大多数时候，这里的数据都是一样的，不需要反复请求。

解决办法：

  使用<keep-alive>将请求的数据缓存到内存中，当再次访问时，直接从内存中取数据即可！案例如下：

<template> <div id="app"> <keep-alive> <router-view/> </keep-alive> </div> </template>

问题二：

  如上例所示，当主界面随着我们在城市列表界面的选择而改变时，这个时候，使用 <keep-alive> 缓存的数据就无效了，这种情况如何应对？

解决办法1：

备注： 1.mounted ()：当配合 <keep-alive> 使用时，mounted ()只在页面挂载时调用（只调用一次）；普通情况下，每次组件出现时，都会被调用。 2.activated ()：当配合 <keep-alive> 使用时，activated ()生命周期方法才会出现activated ()在页面由隐藏到出现时调用（每次都调用） 1.请求路径上加上城市参数，如下：

getHomeInfo () { Axios.get('/api/index.json?city=' + this.city) .then(this.getHomeInfoSucc) },

2.在 mounted () 中记录本次访问的城市

mounted () { this.lastCity = this.city this.getHomeInfo() },

3.在 activated () 中比较上衣访问的城市和本次访问的城市，若不一致，则重新访问

activated () { //当上一次访问的城市和本次访问的城市不同时，重新请求数据 if(this.lastCity != this.city) { this.lastCity = this.city this.getHomeInfo() } }

解决办法2：

<!-- 除了 name 为 Detail 的路由，其他都做缓存 --> <keep-alive exclude="Detail"> <router-view/> </keep-alive>