小程序中监听属性--监听字段语法

数据监听器支持监听属性或内部数据的变化，可以同时监听多个。一次 setData 最多触发每个监听器一次。同时，监听器可以监听子数据字段，如下例所示。

<view class="container">
  <view>username: {{userInfo.username}}</view>
  <view>sex: {{userInfo.sex}}</view>
  <view>arrJoin: {{arrJoin}}</view>
</view>

<button bind:tap="changeValue">设置username为plum,arr[2]为10</button>

Component({
  data: {
    userInfo: {
      username: 'little',
      sex: 'female'
    },
    arr: [1,2,3,4,5,6],
  },
  lifetimes: {
    attached(){
      this.setData({
        arrJoin: this.data.arr.join(',')
      })
    }
  },
  observers: {
    'userInfo.username': function(username) {
      // 使用setData设置this.data.userInfo.username时触发 使用setData设置this.data.userInfo也会触发
      console.log(username);
    },

    'arr[2]': function(arr2) {
      // 使用setData设置this.data.arr[2]时触发 使用setData设置this.data.arr也会触发
      console.log(arr2);
      console.log(this.data.arr);
      this.setData({
        arrJoin: this.data.arr.join(',')
      }) 
      // this.setData({arr: this.data.arr})   //监听中设置监听数据字段会死循环
    },
    
    // 如果需要监听所有子数据字段的变化，可以使用通配符 ** 。
    'userInfo.**': function(userInfo) {
      // 使用setData设置this.data.userInfo.username时触发 使用setData设置this.data.userInfo也会触发
      console.log(userInfo);
    },
    
    // 特别地，仅使用通配符 ** 可以监听全部 setData 。
    '**': function(data) {
    // 使用setData设置this.data.userInfo.username时触发 使用setData设置this.data.userInfo也会触发
       console.log(data);
     },
  },

  /**
   * 组件的方法列表
   */
  methods: {
    changeValue(){
       this.setData({
         'userInfo.username': 'plum',
         'arr[2]': 10
       })
    }
  }
})

注意事项
1、数据监听器监听的是 setData 涉及到的数据字段，即使这些数据字段的值没有发生变化，数据监听器依然会被触发。
2、如果在数据监听器函数中使用 setData 设置本身监听的数据字段，可能会导致死循环，需要特别留意。
3、在组件实例进入页面节点树时设置字段值，observers也会被触发执行。
4、数据监听器和属性的 observer 相比，数据监听器更强大且通常具有更好的性能。