一 什么是数据监听器

数据监听器用于监听和响应任何属性和数据字段的变化，从而执行特定的操作。它的作用类似于 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...

    }

  }

})