什么是數(shù)據(jù)監(jiān)聽器？數(shù)據(jù)監(jiān)聽器的基本用法

數(shù)據(jù)監(jiān)聽器用于監(jiān)聽和響應(yīng)任何屬性和數(shù)據(jù)字段的變化，從而執(zhí)行特定的操作。它的作用類似于vue中的watch偵聽器。在小程序組件中，數(shù)據(jù)監(jiān)聽器的基本語法格式如下：

//組件的UI結(jié)構(gòu)如下
<vievt{{n1}} + {{n2}} = {{sum}}</viev>
<button size="mini"bindtap="addN1">n1自增</button>
<button size="mini"bindtap="addN2">n2自增</button>

組件的 .js 文件代碼如下：

Component({
  data:{n1:0,n2:0,sum：0}，//數(shù)據(jù)節(jié)點(diǎn)
  methods:{//方法列表
     addN1(){ this.setData({n1:this.data.n1 +1 })},
     addN2(){this.setData({n2:this.data.n2 + 1 })}
  },
  observers:{//數(shù)據(jù)監(jiān)聽節(jié)點(diǎn)
     'n1,n2':function(n1,n2){       //監(jiān)聽 n1和n2數(shù)據(jù)的變化
       this.setData({ sum:n1 +n2 })//通過監(jiān)聽器，自動(dòng)計(jì)算 sum的值
      }
   }
}）

數(shù)據(jù)監(jiān)聽器支持監(jiān)聽對(duì)象中單個(gè)或多個(gè)屬性的變化，示例語法如下：

Component({
  observers: {
    ‘對(duì)象.屬性A,對(duì)象.屬性B'：function(屬性A的新值，屬性B的新值）{
       //觸發(fā)此監(jiān)聽器的3種情況：
       //【為屬性A賦值】使用 setData 設(shè)置 this.data.對(duì)象.屬性A 時(shí)觸發(fā)
       //【為屬性B賦值】使用 setData 設(shè)置 this.data.對(duì)象、屬性B 時(shí)觸發(fā)
       // 【直接的對(duì)象賦值】使用 setData 設(shè)置this.data.對(duì)象時(shí)觸發(fā)
       // do something.….
    }
  }
}）