数据监听器用于监听和响应任何属性和数据字段的变化，从而执行特定的操作。它的作用类似于 vue 中的 watch 侦听器。在小程序组件中，数据监听器的基本语法格式如下。
Component({
observers: {
'字段A, 字段B': function (字段A的新值, 字段B的新值) {
// do something
}
}
})
{{n1}} + {{n2}} = {{sum}}
Component({
/**
* 组件的初始数据
*/
data: {
n1: 0,
n2: 0,
sum: 0
},
/**
* 组件的方法列表
*/
methods: {
addN1() {
this.setData({
n1: this.data.n1 + 1
})
},
addN2() {
this.setData({
n2: this.data.n2 + 1
})
}
},
observers: { // 数据监听数据
'n1, n2': function (newN1, newN2) { // 监听 n1 和 n2 的数据变化
this.setData({
sum: newN1 + newN2 // 通过监听器，自动计算 sum 的值
})
}
}
})
数据监听器支持监听对象中单个或多个属性的变化，示例语法如下。
Component({
observers: {
'对象.属性A, 对象.属性B': function (属性A的新值, 属性B的新值) {
// 触发此监听器的 3 种情况
// 【为属性A赋值】 使用 setDate 设置 this.data.对象.属性A 时触发
// 【为属性B赋值】 使用 setDate 设置 this.data.对象.属性B 时触发
// 【直接为对象赋值】 使用 setDate 设置 this.data.对象 时触发
// do something...
}
}
})