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

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

二 数据监听器的基本用法
1 组件的 UI 结构如下
<view>{{n1}} + {{n2}} = {{sum}}</view>
<button bindtap="addN1">n1+1</button>
<button bindtap="addN2">n2+1</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 (newN1, newN2) { // 监听 n1 和 n2 的数据变化
      this.setData({
        sum: newN1 + newN2 // 通过监听器，自动计算 sum 的值
      })
    }
  }
})

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

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