商城系統(tǒng) 注冊

observer數(shù)據(jù)監(jiān)聽器小程序開發(fā)說明

2020-09-14|HiShop
導(dǎo)讀:數(shù)據(jù)監(jiān)聽器 數(shù)據(jù)監(jiān)聽器可以用于監(jiān)聽和響應(yīng)任何屬性和數(shù)據(jù)字段的變化。從小程序基礎(chǔ)庫版本 2.6.1 開始支持。 使用數(shù)據(jù)監(jiān)聽器 有時,在一些數(shù)據(jù)字段被 setData 設(shè)置時,需要執(zhí)行一些操...

  數(shù)據(jù)監(jiān)聽器

  數(shù)據(jù)監(jiān)聽器可以用于監(jiān)聽和響應(yīng)任何屬性和數(shù)據(jù)字段的變化。從小程序基礎(chǔ)庫版本 2.6.1 開始支持。

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

  有時,在一些數(shù)據(jù)字段被 setData 設(shè)置時,需要執(zhí)行一些操作。

  例如, this.data.sum 永遠(yuǎn)是 this.data.numberA 與 this.data.numberB 的和。此時,可以使用數(shù)據(jù)監(jiān)聽器進(jìn)行如下實(shí)現(xiàn)。

  Component({

  attached: function() {

  this.setData({

  numberA: 1,

  numberB: 2,

  })

  },

  observers: {

  'numberA, numberB': function(numberA, numberB) {

  // 在 numberA 或者 numberB 被設(shè)置時,執(zhí)行這個函數(shù)

  this.setData({

  sum: numberA + numberB

  })

  }

  }

  })

  在開發(fā)者工具中預(yù)覽效果

  監(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 設(shè)置 this.data.some.subfield 時觸發(fā)

  // (除此以外,使用 setData 設(shè)置 this.data.some 也會觸發(fā))

  subfield === this.data.some.subfield

  },

  'arr[12]': function(arr12) {

  // 使用 setData 設(shè)置 this.data.arr[12] 時觸發(fā)

  // (除此以外,使用 setData 設(shè)置 this.data.arr 也會觸發(fā))

  arr12 === this.data.arr[12]

  },

  }

  })

  如果需要監(jiān)聽所有子數(shù)據(jù)字段的變化,可以使用通配符 ** 。

  Component({

  observers: {

  'some.field.**': function(field) {

  // 使用 setData 設(shè)置 this.data.some.field 本身或其下任何子數(shù)據(jù)字段時觸發(fā)

  // (除此以外,使用 setData 設(shè)置 this.data.some 也會觸發(fā))

  field === this.data.some.field

  },

  },

  attached: function() {

  // 這樣會觸發(fā)上面的 observer

  this.setData({

  'some.field': { /* ... */ }

  })

  // 這樣也會觸發(fā)上面的 observer

  this.setData({

  'some.field.xxx': { /* ... */ }

  })

  // 這樣還是會觸發(fā)上面的 observer

  this.setData({

  'some': { /* ... */ }

  })

  }

  })

  特別地,僅使用通配符 ** 可以監(jiān)聽全部 setData 。

  Component({

  observers: {

  '**': function() {

  // 每次 setData 都觸發(fā)

  },

  },

  })

  Bugs & Tips:

  數(shù)據(jù)監(jiān)聽器監(jiān)聽的是 setData 涉及到的數(shù)據(jù)字段,即使這些數(shù)據(jù)字段的值沒有發(fā)生變化,數(shù)據(jù)監(jiān)聽器依然會被觸發(fā)。

  如果在數(shù)據(jù)監(jiān)聽器函數(shù)中使用 setData 設(shè)置本身監(jiān)聽的數(shù)據(jù)字段,可能會導(dǎo)致死循環(huán),需要特別留意。

  數(shù)據(jù)監(jiān)聽器和屬性的 observer 相比,數(shù)據(jù)監(jiān)聽器更強(qiáng)大且通常具有更好的性能。

電話咨詢 預(yù)約演示 0元開店