vue踩坑记录之变量赋值同步修改

最近用vue写上拉加载下拉刷新的demo时遇到了一个问题。在生命周期onload函数里把变量B赋值给变量A，在执行上拉加载时，变量A的数据发生了变化，这时变量B的数据也跟着发生了变化。

封面.jpg

一、问题如下

//默认加载第一页的数据
onload() {
  this.list = this.page1;
},
//加载第二页的数据 这里变量list的值发生了变化
load() {
  if(this.isClick){
    var obj = {};
    var page2 = this.page2;
    for(let i in page2){
      obj = {
        title: page2[i].title
      };
      // console.log(obj);
      this.list.push(obj);
    };
    // console.log(this.list);
    //设置为false 禁止再次点击
    this.isClick = false;
    this.dis = true;
    this.text = "暂无数据";
  }
}

在执行上拉加载函数load()中变量list的值发生了变化，因此变量page1的值也跟着发生了变化。这也就造成了一个问题，在执行下拉刷新函数this.onload()时重新请求第一页的数据再也不是原始的初始化数据。也就不能正确的获取到第一页的数据。因此，我们需要解决这个问题。

二、解决方法
先把变量page1转换成字符串，然后再转换成对象即可。

onload() {
  this.list = JSON.parse(JSON.stringify(this.page1));
}