百度智能小程序 數(shù)據(jù)監(jiān)聽(tīng)器

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

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

有時(shí)，需要組合監(jiān)聽(tīng)一些數(shù)據(jù)字段。

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

代碼示例

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

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)聽(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
        },
    },
    data: {
        some: {
            field: {
                subfield: [1, 2, 3]
            }
        }
    },
    attached: function() {
        // 會(huì)觸發(fā) observers
        this.setData({
            'some.field': {}
        });
        
        // 會(huì)觸發(fā) observers
        // this.setData({
        //     'some.field.xxx': {}
        // });

        // 會(huì)觸發(fā) observers
        // this.setData({
        //     'some': {}
        // });
    }
});

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

Component({
    observers: {
        '**': function(value) {
            // 數(shù)據(jù)發(fā)生變化即觸發(fā)，這里的 value 是 properties 和 data 的合集
        }
    }
})

Bugs & Tips

• 數(shù)據(jù)監(jiān)聽(tīng)器監(jiān)聽(tīng)的是setData中涉及的數(shù)據(jù)字段，并且只有這些字段發(fā)生改變時(shí)才會(huì)觸發(fā)，類似observer;
• 在數(shù)據(jù)監(jiān)聽(tīng)器中再次進(jìn)行setData設(shè)置被監(jiān)聽(tīng)的字段，可能會(huì)造成循環(huán)監(jiān)聽(tīng)，請(qǐng)注意使用；
• 由于小程序?qū)etData進(jìn)行了優(yōu)化操作，所以如果同步的多次設(shè)置setData那么實(shí)際上只會(huì)執(zhí)行最后一次setData引起的observers。

代碼示例

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。