observer數據監聽器小程序怎么開發

這篇文章主要介紹“observer數據監聽器小程序怎么開發”，在日常操作中，相信很多人在observer數據監聽器小程序怎么開發問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”observer數據監聽器小程序怎么開發”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

　　數據監聽器

　　數據監聽器可以用于監聽和響應任何屬性和數據字段的變化。從小程序基礎庫版本 2.6.1 開始支持。

　　使用數據監聽器

　　有時，在一些數據字段被 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

　　})

　　}

　　}

　　})

　　在開發者工具中預覽效果

　　監聽字段語法

　　數據監聽器支持監聽屬性或內部數據的變化，可以同時監聽多個。一次 setData 最多觸發每個監聽器一次。

　　同時，監聽器可以監聽子數據字段，如下例所示。

　　Component({

　　observers: {

　　'some.subfield': function(subfield) {

　　// 使用 setData 設置 this.data.some.subfield 時觸發

　　// (除此以外，使用 setData 設置 this.data.some 也會觸發)

　　subfield === this.data.some.subfield

　　},

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

　　// 使用 setData 設置 this.data.arr[12] 時觸發

　　// (除此以外，使用 setData 設置 this.data.arr 也會觸發)

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

　　},

　　}

　　})

　　如果需要監聽所有子數據字段的變化，可以使用通配符 ** 。

　　Component({

　　observers: {

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

　　// 使用 setData 設置 this.data.some.field 本身或其下任何子數據字段時觸發

　　// (除此以外，使用 setData 設置 this.data.some 也會觸發)

　　field === this.data.some.field

　　},

　　},

　　attached: function() {

　　// 這樣會觸發上面的 observer

　　this.setData({

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

　　})

　　// 這樣也會觸發上面的 observer

　　this.setData({

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

　　})

　　// 這樣還是會觸發上面的 observer

　　this.setData({

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

　　})

　　}

　　})

　　特別地，僅使用通配符 ** 可以監聽全部 setData 。

　　Component({

　　observers: {

　　'**': function() {

　　// 每次 setData 都觸發

　　},

　　},

　　})

　　Bugs & Tips:

　　數據監聽器監聽的是 setData 涉及到的數據字段，即使這些數據字段的值沒有發生變化，數據監聽器依然會被觸發。

　　如果在數據監聽器函數中使用 setData 設置本身監聽的數據字段，可能會導致死循環，需要特別留意。

　　數據監聽器和屬性的 observer 相比，數據監聽器更強大且通常具有更好的性能。

到此，關于“observer數據監聽器小程序怎么開發”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！