026自定义以组件-数据监听器

什么是数据监听器

数据监听器用于监听和响应任何属性和数据字段的变化，
从而执行特定的操作。
它的作用类似于vue中的watch监听器。
在小程序组件中，数据监听器的基本语法格式如下：

数据监听器的基本结构

组件的UI结构如下：

组件JS代码如下：

开始创建：

使用新组件：

  /**
   * 组件的初始数据
   */
  data: {
    n1: 0,
    n2: 0,
    sum: 0
  },

 /**
   * 组件的方法列表
   */
  methods: {
    addN1() {
      this.setData({
        n1: this.data.n1 + 1
      })
    },
    addN2() {
      this.setData({
        n2: this.data.n2 + 1
      })
    }
  },
  // 数据监听，监听n1和n2
  observers: {
    'n1, n2': function (newN1, newN2) {
      this.setData({
        sum: newN1 + newN2
      })
    }
  }

监听对象属性的变化

数据监听器支持监听对象中单个或多个属性的变化，势力语法如下：