问题

记录一下出现的问题, 数据翻倍
这是复现问题的代码

 data() {
    return {
      space: "",
      allresult: []
    };
  },
  methods: {
    getmessage() {
      this.allresult = [];
      axios
        .get(
          "https://gist.githubusercontent.com/xiaolannuoyi/9b0defe4959e71fa97e6096cc4f82ba4/raw/4be939123d488cee7ecefc055fb5ecb2ed8d5c8d/test"
        )
        .then(data => {
          console.log(data);
          let result = data.data;
          for (let i = 0; i < result.length; i++) {
            //原因在于这里的this.Allresult
            this.allresult.push({
              id: result[i].id,
              name: result[i].name,
              age: result[i].age
            });
            
          }
            console.log('此时的this.allresult',this.allresult);
        });
    }
  },
  watch: {
    space() {
      console.log("watch");
      this.getmessage();
    }
  },
  mounted() {
    this.space = "123";
    console.log("mounted");
    this.getmessage();
  }

结果

此时你可以看到第二次的数据时 是 第一次的 2倍

原因

mounted 和 watch 都执行 getmessage 方法,虽然方法之前 对数据进行了清空,但是 异步请求执行的慢,
所以两次调用getmessage相当于 this.allresult = []; this.allresult = []; axios...;axios....: 这个顺序
所以才会出现上述现象

解决

1. 修改this.allresult = []的位置
   
   2.新建一个临时空数组