observers监听对象多个属性的变化

.wxml代码：

 <view style="margin: 40rpx 0;">
    <view style="background-color: rgb({{fullColor}});" class="colorBox">
      颜色值：{{fullColor}}
    </view>
    <button type="default" size="mini" bindtap="changeR">R</button>
    <button type="primary" size="mini" bindtap="changeG">G</button>
    <button type="warn" size="mini" bindtap="changeB">B</button>
    {{rgb.r}}--{{rgb.g}}--{{rgb.b}}
  </view>

.wxss代码

.colorBox {
  height: 200rpx;
  line-height: 200rpx;
  font-size: 24rpx;
  color: white;
  text-shadow: 0rpx 0rpx 2rpx black;
  text-align: center;
}

.js代码

  data: {
    count: 0,
    n1: 0,
    n2: 0,
    rgb: {
      r: 0,
      g: 0,
      b: 0
    },
    fullColor: '0,0,0'
  },

**通配符，监听rgb对象下的所有属性：

 'rgb.**': function (obj) {
      this.setData({
        fullColor: `${obj.r},${obj.g},${obj.b}`
      })
    }

changeR() {
      this.setData({
        'rgb.r': this.data.rgb.r + 5 > 255 ? 255 : this.data.rgb.r + 5
      })
    },
    changeG() {
      this.setData({
        'rgb.g': this.data.rgb.g + 5 > 255 ? 255 : this.data.rgb.g + 5
      })
    },
    changeB() {
      this.setData({
        'rgb.b': this.data.rgb.b + 5 > 255 ? 255 : this.data.rgb.b + 5
      })
    },
   
# 总结
该案例展示了通过点击按钮改变rgb的属性并监听rgb的变化把值赋值给fullColor最后改变view颜色