vue项目笔记（22）-使用keep-alive优化网页代码

落日映苍穹つ 2021-09-16 03:18 347阅读 0赞

# 使用keep-alive优化网页代码 #

在运行项后时，打开控制台的Network-XHR，点击城市切换，而后点击返回到首页，我们发现index.json请求了两次，在产生路由切换的时候，ajax请求都会重新进行请求，严重影响网页性能。如果可以发起一次请求就好了。

![70][]

解决方法：用<keep-alive></keep-alive>包裹<router-view />

// App.vue组件
    <keep-alive>
            <router-view/>
    </keep-alive>

此时，项目仍存在一些问题，当切换到某一指定的城市之后，home页面应该所切换到的城市的相关内容。所以，在进行ajax请求的时候，我们应该写到对应的参数（指定的城市），该参数是vuex中存储的当前所在的城市。因此，我们在Home组件中引入vuex，具体具体代码变动如下：

（1）引入vuex， ***import \{ mapState \} from 'vuex'***

（2）修改请求的url，***/api/index.json?city='+ this.city***

此时，请求中应该是对应城市的请求信息了。

![70 1][]

随后，我们清空控制台，重新选择城市，比如“三亚”，但是我们发现，因为keep-alive缓存的原因，并没有发起任何ajax请求。“三亚”对应的相关信息仍未展示。

![70 2][]

所以，如果我们要显示“三亚”的相关信息，我们必须改变缓存中的数据。在使用keep-alive时，vue中会多出一个生命周期钩子activated。在首次进入home页面的时候，mounted，activated均会执行，但是当再次切换到home页面的时候（页面重新被显示的时候），只有activated会执行。

![70 3][]

代码修改如下：

（1）data中定义lastCity，表示缓存中的城市

lastCity: '',

（2）钩子函数mounted中

this.lastCity = this.city;

（3）钩子函数mounted中，做出判断（如果再次进入的页面不是之前的页面，便发起ajax请求，并且修改缓存中的城市）

if (this.lastCity !== this.city) {
            this.lastCity = this.city;
            this.getHomeInfo();
    }

[70]: /images/20210802/df1c8f56e93e4569bf247df183d4b558.png
[70 1]: /images/20210802/5737453802574623b767c97aa778ffc4.png
[70 2]: /images/20210802/23c1ff5cbc1145fbb9cb7f6a631f6351.png
[70 3]: /images/20210802/0a7444bafa024fb080eedbfc5d7b707f.png