自定义组件④数据监听器-微信小程序开发（二十一）

1. 什么是数据监听器

数据监听器用于监听和响应任何属性和数据字段的变化，从而执行特定的操作。它的作用类似于 vue 中的
watch 侦听器。在小程序组件中，数据监听器的基本语法格式如下：

Component({
  observers:{
    '字段A，字段B':function(字段A的新值，字段B的新值){
      // do something
    }
  }
})

2. 数据监听器的基本用法

1）组件的 UI 结构如下：

<view>{{n1}} + {{n2}} = {{sum}}</view>
<button size="mini" bindtap="addN1">n1自增</button>
<button size="mini" bindtap="addN2">n2自增</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(n1,n2){      //监听n1 和n2 数据的变化
      this.setData({sum:n1 + n2}) //通过监听器，自动计算 sum 的值
    }
  }
})

3. 监听对象属性的变化

数据监听器支持监听对象中单个或多个属性的变化，示例语法如下：

Component({
  observers:{
    '对象.属性A,对象.属性B':function(属性A的新值,属性B的新值){
      //触发此监听的 3 种情况：
      //【为属性A赋值】使用 setData 设置 this.data.对象.属性A 时触发
      //【为属性B赋值】使用 setData 设置 this.data.对象.属性B 时触发
      //【直接为对象赋值】使用 setData 设置 this.data.对象 时触发
      // do something
    }
})

如果某个对象中需要被监听的属性太多，为了方便，可以使用通配符 ** 来监听对象中所有属性的变化，示例代码如下：

Component({
  observers:{
    //使用通配符 ** 监听对象上所有属性的变化
    'user.**':function(user){
      this.setData({
        userInfo:`姓名：${user.name}，年龄：${user.age}`
      })
    }
})