微信小程序中observers数据监听器

observers的使用方法

组件数据字段监听器，用于监听 properties 和 data 的变化。直接赋值改变变量无法监听到，只要setData()修改后不管是否改变值都会触发observers监听。

• 包括data和properties 中的数据。

1. **：监听所有的改变的值。
2. 变量：监听单个变量。
3. 变量1，变量2：监听多个变量，有一个发生改变就会被监听到。
4. 对象.属性值：监听对象中的某个属性。
5. 对象.**：监听对象中所有属性。
6. 数值[下标]：监听数组中的某个元素的值，无法监听整个数组。

示例

 observers: {
    isChecked: (newVal) => {
      console.log(newVal, '我是observers');
    },
    // 同时监听多个数据 有一个发生变化就会被监听到
    'isChecked, num': (newVal1, newVal2) => {
      console.log(newVal1, newVal2, '我是observers');
    },
    // 监听对象属性以及数据元素的变化 使用数据路径写在''字符串中
    'obj1.age': (newVal) => {
      console.log(newVal, '我是observers对象属性发生改变');
    },
    'arr[4]': (newVal) => {
      console.log(newVal, '我是observers数组元素发生改变');
    },
    // 监听对象中所有属性的变化 使用.**通配符。无法监听整个数组
    'obj1.**': (newVal) => {
      console.log(newVal, '我是observers对象发生改变');
    },
    // 监听properties父传子的值
    label: (newVal) => {
      console.log(newVal, '我是observers监听properties父传子的值发生改变');
    },
    // 监听所有的改变的值 包括data和properties
    '**': (newVal) => {
      console.log(newVal, '我是observers监听所有setdata');
    }
  },

组件properties内的observer

• properties内可以直接使用observer监听数据变化，并只监听改变了的状态。

示例

  <customCheckbox label="{{label}}" id="customCheckbox" />
  <button bindtap="onClickCusCheckbox"></button>
  
  onClickCusCheckbox() {this.setData({label: "改变label"});}

<text>{{label || 我是标签}}</text>

Component({
    properties: {
        label: String, // 简写
        position: { // 全写
          type: String, // 类型
          value: 'left', // 默认值
          // 可选：当属性值变化时触发的观察者函数
          observer: function (newVal, oldVal) {
            console.log('isChecked changed from', oldVal, 'to', newVal);
          }
        }
    }
})