微信小程序this.setData()和this.data很容易入的坑

先上一段代码

pageData: function (e) {
    let that = this
    let datas = e.detail.datas
    let page = e.detail.page //返回的第几页
    let totalPageNum = e.detail.totalPageNum  //总页数
    that.setData({
      totalPageNum: totalPageNum
    })
    if (page == 1 ) {
      that.setData({
        packageList: datas,
        page: page + 1,
      })
    }
   if (page < totalPageNum) {
      let list = that.data.packageList;
      for (var i = 0; i < datas.length; i++) {
        list.push(datas[i]);
      }
      that.setData({
        page: page + 1,
        packageList: list,
      })
    } else {
       console.log("没有更多数据了")
    }
}

上完这段代码以后，小工具就直接崩溃，进入死循环。仔细检查后，感觉没什么问题，打断点后发现，第一次进入的时候，也就是page=1的时候，直接进入

 let list = that.data.packageList;
      for (var i = 0; i < datas.length; i++) {
        list.push(datas[i]);
      }
      that.setData({
        page: page + 1,
        packageList: list,
      })

然后每循环一次，datas的值就+1，所以进入无线死循环
其实，因为page=1,所以已经给packageList赋值了datas,而packageList，datas两个变量指向的是同一片存储区域，无论通过哪个变量操作这片存储区域，相应的两个变量得出的值都会变换。为了继续证明我们的猜想是正确的，下面我只操作this.data而不操作data。

总结：
this.data与this.setData的关系就是this.setData里面存储的是this.data的副本，而界面是从this.setData里面托管的this.data的副本取数据的。所以我们更改this.data并不会直接更新界面，因为这个时候的this.setData里面的副本还是没有更新前的。