Vue利用keep-alive请求性能优化（当将要请求的数据和已请求数据一致时，不进行请求）

一、情景：

在选择城市功能中已经选择了上海，再次选择上海，则不应该重复对上海数据的请求

二、在App.vue中加一层keep-alive

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

三、Home.vue中操作data和相关生命周期函数

data() {
            return {
                spikeList: [],
                likeList: [],
                lastCity:'',//创建一个lastCity保存选择的城市名
            }
        },
mounted() {
            this.lastCity=this.cityName;//将选择的城市名赋给lastCity
            this.http();//进行数据请求
        },
activated(){
            if(this.cityName!=this.changeCity){
            //现在的城市名不等于原来的城市名
                //则请求数据
                this.http();
                 //将现在的城市名赋给lastCity
                this.lastCity=this.cityName;
            }
        },