Custom component -- data listener

1. Data listeners are used to listen and respond to any changes in attributes and data segments , To perform specific operations . Its function is similar to Vue Medium watch Monitor . In the applet , The basic syntax format of the data listener is as follows ：

Component({
    observers:{
    ' Field A, Field B'：function（ Field A The new value of , Field B The new value of ）{
            //do something
        }
    }
})

2. Basic usage of data listener

// Components wxml
<button bindtap="addN1"> Click on N1</button>
<button bindtap="addN2"> Click on N2</button>
<view>
{
   {n1}}+{
   {n2}}={
   {sum}}
</view>

// Components js file 
methods：{
     addN1(){this.setData({n1:this.data.n1+1})},
        addN2(){this.setData({n2:this.data.n2+1})},
        addSum(){this.setData({sum:this.data.n1+this.data.n2})}// The listener is actually equivalent to this line of code 
   
}

  observers:{
        'n1,n2':function(n1,n2){// monitor n1 and n2 Data changes of 
            this.setData({
                sum:n1+n2// Automatically calculate through the listener sum Value 
            })
        }

3. The data listener supports... In the listening object Single Or multiple properties The change of

Component（{
    observers：{
        ' object . attribute A, object . attribute B'：function（ attribute A Value , attribute B Value ）-
        //do something
    }
}）

4. Case study

// Components js
data{
      rgb:{
            r:0,
            g:0,
            b:0
        },
        fullcolor:'0,0,0'// according to rgb Object's three attribute values , Dynamic computing fullcolor Value 
},


// Components wxml  Rendering UI structure 
<view style="background-color: rgb({
   {fullcolor}});" class="colorBox"> Color value ：{
   {fullcolor}}</view>
<button size="mini" type="primary" bindtap="changeR">R</button>
<button size="mini" type="warn" bindtap="changeG">G</button>
<button size="mini" type="default" bindtap="changeB">B</button>


// Components js file 
methods：{
    changeR(){
            this.setData({
                'rgb.r':this.data.rgb.r+5>255? 255: this.data.rgb.r+5
            })
            console.log(this.data.fullcolor)
            console.log(this.data.rgb.r)
        },
        changeG(){
            this.setData({
                'rgb.g':this.data.rgb.g+5>255? 255: this.data.rgb.g+5
            })
        },
        changeB(){
            this.setData({
                'rgb.b':this.data.rgb.b+5>255? 255: this.data.rgb.b+5
            })
        }
}

// Listen for changes to the specified attributes in the object 
observers：{
     'rgb.r,rgb.g,rgb.b':function(r,g,b){
            // by data Medium fullcolor Reassign 
            this.setData({
                 fullcolor:`${r},${g},${b}`
            })
}

 5. If there are too many attributes in an object that need to be monitored , For convenience , You can use wildcards “**” To listen for changes to all attributes in the object

observers：{
     'rgb.**':function(obj){
            // by data Medium fullcolor Reassign 
            this.setData({
                 fullcolor:`${obj.r},${obj.g},${obj.b}`
            })
}