微信小程序開發(fā)數(shù)據(jù)監(jiān)聽器

微信小程序數(shù)據(jù)監(jiān)聽器可以用于監(jiān)聽和響應任何屬性和數(shù)據(jù)字段的變化，是在小程序基礎庫版本2.6.1以后開始支持的。下面介紹如何使用數(shù)據(jù)監(jiān)聽器。

1. 使用數(shù)據(jù)監(jiān)聽器

當一些數(shù)據(jù)字段被setData設置時，需要執(zhí)行一些操作。例如，this.data.sum永遠是this.data.numberA與this.data.numberB的和。此時，可以使用數(shù)據(jù)監(jiān)聽器進行實現(xiàn)。使用示例如下：

<Component>{
  attached: function() {
    this.setData({
      numberA: 1,
      numberB: 2,
    })
  },
  observers: {
    'numberA, numberB': function(numberA, numberB) {
      // 在 numberA 或者 numberB 被設置時，執(zhí)行這個函數(shù)
      this.setData({
        sum: numberA + numberB
      })
    }
  }
}</Component>

2. 監(jiān)聽字段語法

數(shù)據(jù)監(jiān)聽器支持監(jiān)聽屬性或內(nèi)部數(shù)據(jù)的變化，可以同時監(jiān)聽多個。一次setData最多觸發(fā)每個監(jiān)聽器一次。同時，監(jiān)聽器可以監(jiān)聽子數(shù)據(jù)字段。示例如下：

<Component>{
  observers: {
    'some.subfield': function(subfield) {
      // 使用 setData 設置 this.data.some.subfield 時觸發(fā)
      // （除此以外，使用 setData 設置 this.data.some 也會觸發(fā)）
      subfield === this.data.some.subfield
    },
    'arr[12]': function(arr12) {
      // 使用 setData 設置 this.data.arr[12] 時觸發(fā)
      // （除此以外，使用 setData 設置 this.data.arr 也會觸發(fā)）
      arr12 === this.data.arr[12]
    },
    'some.field.**': function(field) {
      // 使用 setData 設置 this.data.some.field 本身或其下任何子數(shù)據(jù)字段時觸發(fā)
      // （除此以外，使用 setData 設置 this.data.some 也會觸發(fā)）
      field === this.data.some.field
    },
    '**': function() {
      // 每次 setData 都觸發(fā)
    },
  },
}

如果需要監(jiān)聽所有子數(shù)據(jù)字段的變化，可以使用通配符**。特別地，僅使用通配符**可以同時監(jiān)聽全部setData操作。

提示：數(shù)據(jù)監(jiān)聽器監(jiān)聽的是setData涉及到的數(shù)據(jù)字段，即使這些數(shù)據(jù)字段的值沒有發(fā)生變化，數(shù)據(jù)監(jiān)聽器依然會被觸發(fā)。如果在數(shù)據(jù)監(jiān)聽器函數(shù)中使用setData設置本身監(jiān)聽的數(shù)據(jù)字段，可能會導致死循環(huán)，需要特別留意。數(shù)據(jù)監(jiān)聽器和屬性的observer相比，數(shù)據(jù)監(jiān)聽器更強大且通常具有更好的性能。

<本文由himall原創(chuàng)，商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權，非商業(yè)轉(zhuǎn)載請標明：himall原創(chuàng)>