微信小程序中this.data与this.setData的区别详解

场景

实现标签页渲染不同内容时，在onload函数中将storeData数组对象中的元素，根据状态的不同，放到两个新数组中。

data: {
    storeData: [],
    arr1: [],
    arr2: [],
  },
  onLoad: function () {
    var newArr1=this.data.arr1
    var newArr2=this.data.arr2
    var newData=app.globalData.storeData
    for (let i = 0; i < newData.length; i++) {
      if (newData[i].status == '1') {
        newArr1.push(newData[i])
      } else if (newData[i].status == '2') {
        newArr2.push(newData[i])
      }
    }
    this.setData({
      'storeData': newData,
      'arr1':newArr1,
      'arr2':newArr2,
    })
  },

两者关系

关系：this.setData里面存储的是this.data的副本，界面是从this.setData里面托管的this.data的副本取数据的，更改this.data并不会直接更新界面，因为这个时候的this.setData里面的副本还是没有更新前的。
this.data是用来获取页面data对象的。
this.setData是用来更新界面的，用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。

注意

1、直接修改 this.data 无效，无法改变页面的状态，还会造成数据不一致。
2、单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数。

常见问题

问题1：页面如何使用data里面的数据？
答：页面可以直接在{{}}使用data里面的数据
问题2：js页面中如何使用data里面的数据？
答：必须通过this.data.属性
问题3：如何修改data里面的数据？
答：this.setData({属性：值})；直接使用data里面的属性