建站
咨詢
售后
建站咨詢
新聞中心
- 數(shù)據(jù)監(jiān)聽器
- 使用數(shù)據(jù)監(jiān)聽器
- 監(jiān)聽字段語法
- Bugs & Tips
- Bugs & Tips
數(shù)據(jù)監(jiān)聽器
數(shù)據(jù)監(jiān)聽器可以用于監(jiān)聽和響應(yīng)任何屬性和數(shù)據(jù)字段的變化。數(shù)據(jù)監(jiān)聽器自小程序基礎(chǔ)庫版本 3.105.9 開始支持。
我們提供的服務(wù)有：網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、棗莊ssl等。為1000多家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的棗莊網(wǎng)站制作公司
使用數(shù)據(jù)監(jiān)聽器
有時(shí)，需要組合監(jiān)聽一些數(shù)據(jù)字段。
例如，this.data.sum永遠(yuǎn)是 this.data.numberA與this.data.numberB的和。此時(shí)，可以使用數(shù)據(jù)監(jiān)聽器進(jìn)行如下實(shí)現(xiàn)。
代碼示例
在開發(fā)者工具中預(yù)覽效果
- JS
Component({properties: {numberA: {type: Number,value: 0},numberB: {type: Number,value: 0}},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})}}});
監(jiān)聽字段語法
數(shù)據(jù)監(jiān)聽器支持監(jiān)聽屬性或內(nèi)部數(shù)據(jù)的變化，可以同時(shí)監(jiān)聽多個(gè)。一次setData最多觸發(fā)每個(gè)監(jiān)聽器一次。
同時(shí)，監(jiān)聽器可以監(jiān)聽子數(shù)據(jù)字段，如下例所示。
代碼示例
- JS
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)聽所有子數(shù)據(jù)字段的變化，可以使用通配符**。
- JS
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},},data: {some: {field: {subfield: [1, 2, 3]}}},attached: function() {// 會(huì)觸發(fā) observersthis.setData({'some.field': {}});// 會(huì)觸發(fā) observers// this.setData({// 'some.field.xxx': {}// });// 會(huì)觸發(fā) observers// this.setData({// 'some': {}// });}});
特別地，僅使用通配符**可以監(jiān)聽全部setData。
- JS
Component({observers: {'**': function(value) {// 數(shù)據(jù)發(fā)生變化即觸發(fā)，這里的 value 是 properties 和 data 的合集}}})
Bugs & Tips
- 數(shù)據(jù)監(jiān)聽器監(jiān)聽的是
setData中涉及的數(shù)據(jù)字段，并且只有這些字段發(fā)生改變時(shí)才會(huì)觸發(fā)，類似observer; - 在數(shù)據(jù)監(jiān)聽器中再次進(jìn)行
setData設(shè)置被監(jiān)聽的字段，可能會(huì)造成循環(huán)監(jiān)聽，請(qǐng)注意使用； - 由于小程序?qū)?code>setData進(jìn)行了優(yōu)化操作，所以如果同步的多次設(shè)置
setData那么實(shí)際上只會(huì)執(zhí)行最后一次setData引起的observers。
代碼示例
- JS
Component({properties: {numberA: {type: Number,value: 0},numberB: {type: Number,value: 0}},attached: function() {this.setData({numberA: 1,numberB: 2});this.setData({numberA: 2,numberB: 3})},observers: {'numberA, numberB': function (numberA, numberB) {// 在 numberA 或者 numberB 被設(shè)置時(shí)，執(zhí)行這個(gè)函數(shù)this.setData({sum: numberA + numberB})}}});
以上只會(huì)執(zhí)行一次observers。
當(dāng)前標(biāo)題：創(chuàng)新互聯(lián)百度小程序教程：數(shù)據(jù)監(jiān)聽器
本文路徑：http://m.fisionsoft.com.cn/article/dhpegpp.html
