小程序：this.data 与 this.setData()

Posted 2023-03-14

参考技术A

官方
先看一下官方对于 this.data 和 this.setData() 的定义与用法

知识点
this.data 是用来获取页面data对象，仅会改变数据，无法改变页面的状态，可能会造成数据不一致；
this.setData() 是用来修改数据，不仅会改变数据，而且还会改变视图；

问题
实际自己在学习过程中，遇到一个问题，下拉刷新的方法当中，用 this.data 与 this.setData() ，在数据显示上并没有什么不同，学习的视频中，授课老师用的是this.data，这个地方我自己也没有搞清楚是为什么

操作效果：
this.data

this.setData()

可以看出来，两者使用并没有什么明显的区别。

总结
实际使用当中按照上面 知识点 部分加粗部分去执行，肯定是没有错的，涉及到页面数据更新的，使用**this.setData() **，在js中使用data数据时使用****this.data.属性 。****

微信小程序Component observers监听data数据更新导致死循环bug

使用数据监听器

有时，在一些数据字段被 setData 设置时，需要执行一些操作。

例如， this.data.sum 永远是 this.data.numberA 与 this.data.numberB 的和。此时，可以使用数据监听器进行如下实现。

Component({
  attached: function() {
    this.setData({
      numberA: 1,
      numberB: 2,
    })
  },
  observers: {
    ‘numberA, numberB‘: function(numberA, numberB) {
      // 在 numberA 或者 numberB 被设置时，执行这个函数
      this.setData({
        sum: numberA + numberB
      })
    }
  }
})

当我尝试按照以上方法进行监听数据时，错误的设置了

this.setData({
     numberA:numberA,// 文档里面是设置的sum变量，我这里设置了监听的变量
});

导致无限循环监听卡死。这里不需要重新设置setData，因为组件已经获取到了最新的数据。