微信小程序observers监听数据变化

observers可以监听自定义组件数据，它是微信小程序提供的一个监听函数，可以用来监听组件中data、properties中数据的变化。

Component({
    /**
     * 组件的属性列表
     */
    properties: {
        fvEstateType: {
            type: String,
            value: ''
        }
    },

    /**
     * 组件的初始数据
     */
    data: { },

    // 数据变化监听
    observers: {
        // "fvEstateType"为你要监听的数据,函数中fvEstateType为新值
        "fvEstateType": function(fvEstateType){
            console.log('数据变化',fvEstateType);
        },
    },

    /**
     * 组件的方法列表
     */
    methods: { }
})

注意：在observers中使用箭头函数会因为this指向问题导致setData报错

    observers: {
        // "fvEstateType"为你要监听的数据,函数中fvEstateType为新值
        "fvEstateType": (fvEstateType) => {
            // this.setData({fvEstateType}) // 报错
        },
    },

你也可以监听多个值的变化

  // 监听多条数据变化
  observers: {
    "showPop, inTabPage, exitApp": function(
      showPop,
      inTabPage,
      exitApp
    ){
      console.log('数据变化', showPop, inTabPage, exitApp);
    },
  },

数据监听器支持监听属性或内部数据的变化，可以同时监听多个。一次 setData 最多触发每个监听器一次。

Component({
  observers: {
    'some.subfield': function(subfield) {
      // 使用 setData 设置 this.data.some.subfield 时触发
      // （除此以外，使用 setData 设置 this.data.some 也会触发）
      subfield === this.data.some.subfield
    },
    'arr[12]': function(arr12) {
      // 使用 setData 设置 this.data.arr[12] 时触发
      // （除此以外，使用 setData 设置 this.data.arr 也会触发）
      arr12 === this.data.arr[12]
    },
  }
})

如果需要监听所有子数据字段的变化，可以使用通配符 ** 。

Component({
  observers: {
    'some.field.**': function(field) {
      // 使用 setData 设置 this.data.some.field 本身或其下任何子数据字段时触发
      // （除此以外，使用 setData 设置 this.data.some 也会触发）
      field === this.data.some.field
    },
  },
  attached: function() {
    // 这样会触发上面的 observer
    this.setData({
      'some.field': { /* ... */ }
    })
    // 这样也会触发上面的 observer
    this.setData({
      'some.field.xxx': { /* ... */ }
    })
    // 这样还是会触发上面的 observer
    this.setData({
      'some': { /* ... */ }
    })
  }
})

特别地，仅使用通配符 ** 可以监听全部 setData 。

Component({
  observers: {
    '**': function() {
      // 每次 setData 都触发
    },
  },
})

注意点：
● 数据监听器监听的是 setData 涉及到的数据字段，即使这些数据字段的值没有发生变化，数据监听器依然会被触发。
● 如果在数据监听器函数中使用 setData 设置本身监听的数据字段，可能会导致死循环，需要特别留意。
● 数据监听器和属性的 observer 相比，数据监听器更强大且通常具有更好的性能。