数据监听器
数据监听器可以用于监听和响应任何属性和数据字段的转变。。。。从小程序基础库版本 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 相比,,,,,,数据监听器更强盛且通常具有更好的性能。。。。
KESION 金狮贵宾会软件
KESION 金狮贵宾会软件是海内领先的在线教育软件及私域社交电商软件服务提供商,,,,,,恒久专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。。。。
公司焦点产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化自力安排品牌网校和在线教育咨询等。。。。KESION 一直通过手艺立异,,,,,,提供产品和服务,,,,,,助力企业向数字化转型,,,,,,通过科技驱动商业刷新,,,,,,让商业变得更智慧!
最新新闻总结,,,,,,开发一个小程序我们可以选择的第三方框架有5种,,,,,,各人较量熟悉的有美团小程序框架mpvue,,,,,,尚有组件化框架等等,,,,,,下面小编就微信小程序框架现在较量火的5种差别的小程...
从 1.03.2006302 (或 1.03.2006302) 最先,,,,,,我们提供了两种构建 npm 的方式: 默认的构建 npm 方式 默认情形下,,,,,,在 miniprogramRoot 内准确设置了 pa