observer數(shù)據(jù)監(jiān)聽(tīng)器小程序怎么開(kāi)發(fā)

這篇文章主要介紹“observer數(shù)據(jù)監(jiān)聽(tīng)器小程序怎么開(kāi)發(fā)”，在日常操作中，相信很多人在observer數(shù)據(jù)監(jiān)聽(tīng)器小程序怎么開(kāi)發(fā)問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”observer數(shù)據(jù)監(jiān)聽(tīng)器小程序怎么開(kāi)發(fā)”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

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

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

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

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

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

　　Component({

　　attached: function() {

　　this.setData({

　　numberA: 1,

　　numberB: 2,

　　})

　　},

　　observers: {

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

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

　　this.setData({

　　sum: numberA + numberB

　　})

　　}

　　}

　　})

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

　　監(jiān)聽(tīng)字段語(yǔ)法

　　數(shù)據(jù)監(jiān)聽(tīng)器支持監(jiān)聽(tīng)屬性或內(nèi)部數(shù)據(jù)的變化，可以同時(shí)監(jiān)聽(tīng)多個(gè)。一次 setData 最多觸發(fā)每個(gè)監(jiān)聽(tīng)器一次。

　　同時(shí)，監(jiān)聽(tīng)器可以監(jiān)聽(tīng)子數(shù)據(jù)字段，如下例所示。

　　Component({

　　observers: {

　　'some.subfield': function(subfield) {

　　// 使用 setData 設(shè)置 this.data.some.subfield 時(shí)觸發(fā)

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

　　subfield === this.data.some.subfield

　　},

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

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

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

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

　　},

　　}

　　})

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

　　Component({

　　observers: {

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

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

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

　　field === this.data.some.field

　　},

　　},

　　attached: function() {

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

　　this.setData({

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

　　})

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

　　this.setData({

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

　　})

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

　　this.setData({

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

　　})

　　}

　　})

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

　　Component({

　　observers: {

　　'**': function() {

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

　　},

　　},

　　})

　　Bugs & Tips:

　　數(shù)據(jù)監(jiān)聽(tīng)器監(jiān)聽(tīng)的是 setData 涉及到的數(shù)據(jù)字段，即使這些數(shù)據(jù)字段的值沒(méi)有發(fā)生變化，數(shù)據(jù)監(jiān)聽(tīng)器依然會(huì)被觸發(fā)。

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

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

到此，關(guān)于“observer數(shù)據(jù)監(jiān)聽(tīng)器小程序怎么開(kāi)發(fā)”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！