2019.03.13更新

官方已支持数据监听，详情可查看数据监听器。
数据监听器可以用于监听和响应任何属性和数据字段的变化。从小程序基础库版本 2.6.1 开始支持。

watch

小程序自定义组件扩展 behavior，watch 属性实现

使用此 behavior 需要依赖小程序基础库 2.2.3 以上版本，同时依赖开发者工具的 npm 构建。具体详情可查阅官方 npm 文档。

使用方法

1. 安装 watch：

npm install --save miniprogram-watch

2. 作为 behavior 引入

const watchBehavior = require("miniprogram-watch");

Component({
  behaviors: [watchBehavior],
  properties: {
    propA: {
      type: Number,
      value: 0
    }
  },
  data: {
    a: 0,
    b: {
      c: {
        d: 33
      },
      e: [1, 2, [3, 4]]
    }
  },
  // 可以将需要监听的数据放入 watch 里面，当数据改变时推送相应的订阅事件
  // 支持 data 以及 properties 的监听
  watch: {
    propA(val, oldVal) {
      console.log("propA new: %s, old: %s", val, oldVal);
    },
    a(val, oldVal) {
      console.log("a new: %s, old: %s", val, oldVal);
    },
    "b.c.d": function(val, oldVal) {
      console.log("b.c.d new: %s, old: %s", val, oldVal);
    },
    "b.e[2][0]": function(val, oldVal) {
      console.log("b.e[2][0] new: %s, old: %s", val, oldVal);
    },
    "b.e[3][4]": function(val, oldVal) {
      console.log("b.e[3][4] new: %s, old: %s", val, oldVal);
    }
  },
  methods: {
    onTap() {
      this.setData({
        a: 2,
        "b.c.d": 3,
        "b.e[2][0]": 444,
        c: 123
      });
      // 不在 data 里面的数据项不会放入观察者列表，比如这里的'b.e[3][4]'
    }
  }
});

<view>a={{a}}</view>
<view>b.c.d={{b.c.d}}</view>
<view>b.e[2][0]={{b.e[2][0]}}</view>
<view>c={{c}}</view>
<view>prop: {{propA}}</view>
<button bindtap="onTap">click</button>

如何在 Page 里使用 watch

参考：《小程序的奇技淫巧之 watch 观察属性》
Tips: Component是Page的超集，《使用 Component 构造器构造页面》

事实上，小程序的页面也可以视为自定义组件。因而，页面也可以使用Component构造器构造，拥有与普通组件一样的定义段与实例方法。但此时要求对应json文件中包含usingComponents定义段。

watch 的实现参考

jayZOU/watch