How to develop the observer data listener Mini Program
This article mainly introduces "how to develop the observer data listener Mini Program". In the daily operation, I believe many people have doubts about how to develop the observer data listener Mini Program. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts about "how to develop the observer data listener Mini Program". Next, please follow the editor to study!
Data listener
Data listeners can be used to listen for and respond to changes in any properties and data fields. It is supported from Mini Program Base Library version 2.6.1.
Using data listeners
Sometimes, some actions need to be performed when some data fields are set by setData.
For example, this.data.sum is always the sum of this.data.numberA and this.data.numberB. At this point, the following implementation can be done using a data listener.
Component ({
Attached: function () {
This.setData ({
NumberA: 1
NumberB: 2
})
}
Observers: {
'numberA, numberB': function (numberA, numberB) {
/ / execute this function when numberA or numberB is set
This.setData ({
Sum: numberA + numberB
})
}
}
})
Preview the effect in the developer tool
Listening field syntax
Data listeners support listening for changes in properties or internal data, and can listen to multiple at the same time. SetData triggers each listener at most once at a time.
At the same time, the listener can listen to child data fields, as shown in the following example.
Component ({
Observers: {
'some.subfield': function (subfield) {
/ / triggered when setting this.data.some.subfield using setData
/ / (in addition, setting this.data.some using setData will also trigger)
Subfield = this.data.some.subfield
}
'arr [12]': function (arr12) {
/ / triggered when setting this.data.arr [12] using setData
/ / (in addition, setting this.data.arr using setData will also trigger)
Arr12 = = this.data.arr [12]
}
}
})
If you need to listen for changes in all child data fields, you can use the wildcard character * *.
Component ({
Observers: {
'some.field.**': function (field) {
/ / triggered when the this.data.some.field itself or any of its next sub-data fields is set using setData
/ / (in addition, setting this.data.some using setData will also trigger)
Field = this.data.some.field
}
}
Attached: function () {
/ / this will trigger the observer above
This.setData ({
'some.field': {/ *... * /}
})
/ / this will also trigger the observer above
This.setData ({
'some.field.xxx': {/ *... * /}
})
/ / this will still trigger the observer above
This.setData ({
'some': {/ *... * /}
})
}
})
In particular, you can listen to all setData using only the wildcard character * *.
Component ({
Observers: {
'*': function () {
/ / setData is triggered every time
}
}
})
Bugs & Tips:
The data listener listens to the data fields involved in setData, and even if the values of these data fields remain unchanged, the data listener will still be triggered.
If you use setData in the data listener function to set the data field that you are listening to, it may cause an endless loop, which requires special attention.
Data listeners are more powerful and generally have better performance than attribute observer.
At this point, the study of "how to develop the observer data listener Mini Program" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!
