一 什么是数据监听器
数据监听器用于监听和响应任何属性和数据字段的变化，从而执行特定的操作。它的作用类似于 vue 中的 watch 侦听器。在小程序组件中，数据监听器的基本语法格式如下。
Component({
observers: {
'字段A, 字段B': function (字段A的新值, 字段B的新值) {
// do something
}
}文章来源：https://www.toymoban.com/news/detail-485923.html
})文章来源地址https://www.toymoban.com/news/detail-485923.html
二 数据监听器的基本用法
1 组件的 UI 结构如下
<view>{{n1}} + {{n2}} = {{sum}}</view>
<button bindtap="addN1">n1+1</button>
<button bindtap="addN2">n2+1</button>
2 组件的 .js 文件代码如下
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...
}
}
})
到了这里，关于微信小程序的数据监听器的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
