数据监听器
官方文档地址:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/observer.html
- 数据监听器可以用于监听和响应任何属性和数据字段的变化,从小程序基础库版本 2.6.1 开始支持。
何时使用数据监听器
有时,数据被setData设置时,需要执行一些操作。那么数据监听器就可以监听数据被setData改变。
通俗点,在使用setDate改变数据时,数据监听器就可以感知到,然后就可以做一些操作。
注意点
- 数据监听器支持监听属性或内部数据的变化,可以同时监听多个。一次 setData 最多触发每个监听器一次。
- 数据监听器监听的是 setData 涉及到的数据字段,即使这些数据字段的值没有发生变化,数据监听器依然会被触发。
- 如果在数据监听器函数中使用 setData 设置本身监听的数据字段,可能会导致死循环,需要特别留意。
- 数据监听器和属性的 observer 相比,数据监听器更强大且通常具有更好的性能。
代码实操
// components/observes/observes.js
Component({
properties: {
testProp:{
type: String,
value: 'testProp'
}
},
data: {
testData:"testData",
arr:[0,1,2],
obj:{
name: 'tan',
score:[1,2,3]
}
},
lifetimes:{
attached:function(){
this.setData({
testData:'changeTestData',
testProp:"changeTestProp",
arr:[3,4,5],
// 改变数组的某一项
"arr[0]":12,
obj: {
name:'luo',
score:[4,5,6]
}
})
}
},
// 数据监听器
observers:{
// 监听谁就写谁,参数就是改变后的值
"testData":function(testData){
console.log("testData改变为",testData);
},
"testProp":function(testProp){
console.log("testProp改变为",testProp);
},
"testData,testProp":function(testData,testProp){
console.log("testData,testProp改变为",testData,testProp);
},
// 监听所有通过setData改变的数据
"**":function(val){
console.log(val);
// {testData: "changeTestData", testProp: "changeTestProp"}
},
// 监听数组,这样写监听不到改变数组的某项的值
"arr":function(arr){
console.log(arr);
// [3, 4, 5]
},
// 监听数组的某一项,数组引用发生改变也是会监听到的
"arr[0]":function(arg){
console.log(arg);
// 3
},
// 监听对象
"obj":function(obj){
console.log(obj);
},
"obj.score[0]":function(arg){
console.log(arg);
},
"obj.score.**":function(arg){
console.log(arg);
},
"obj.name":function(arg){
console.log(arg)
},
// 这样写会报错
// "obj[name]":function(arg){
// console.log(arg);
// }
},
})