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;
            }
        },
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值