微信小程序实现页面数据侦听器，类似vue的watch

既然小程序的组件已经有Observer功能，那为什么还要手写watch功能呢？

1. Observer只能在Component中使用，没法在Page中使用。若是想在Page中监控某一数据的变化，Observer做不到。
2. Observer属于小程序的新功能，只能在高版本微信使用，低版本微信无法使用。公司的小程序就因为使用了Observer功能，导致很多低版本微信用户无法使用这个小程序。

 HTML代码

<view>{{n1}}+{{n2}}={{sum}}</view><button bindtap="addn1">页面中监听n1+1</button><button bindtap="addn2">页面中监听n2+1</button>

新建一个watch.js文件存放监听器的逻辑函数，代码如下：

/** * 设置监听器 */export function setWatcher(page) {  let data = page.data;  let watch = page.watch;  Object.keys(watch).forEach(v => {      let key = v.split('.'); // 将watch中的属性以'.'切分成数组      let nowData = data; // 将data赋值给nowData      for (let i = 0; i < key.length - 1; i++) { // 遍历key数组的元素，除了最后一个！          nowData = nowData[key[i]]; // 将nowData指向它的key属性对象      }      let lastKey = key[key.length - 1];      let watchFun = watch[v].handler || watch[v]; // 兼容带handler和不带handler的两种写法      let deep = watch[v].deep; // 若未设置deep,则为undefine      observe(nowData, lastKey, watchFun, deep, page); // 监听nowData对象的lastKey  })}/*** 监听属性 并执行监听函数*/function observe(obj, key, watchFun, deep, page) {  var val = obj[key];  // 判断deep是true 且 val不能为空 且 typeof val==='object'（数组内数值变化也需要深度监听）  if (deep && val != null && typeof val === 'object') {      Object.keys(val).forEach(childKey => { // 遍历val对象下的每一个key          observe(val, childKey, watchFun, deep, page); // 递归调用监听函数      })  }  Object.defineProperty(obj, key, {      configurable: true,      enumerable: true,      set: function(newVal) {          watchFun.call(page, newVal, val);           val = newVal;          if (deep) { // 若是深度监听,重新监听该对象，以便监听其属性。              observe(obj, key, watchFun, deep, page);          }      },      get: function() {          return val;      }  })}module.exports = {  setWatcher: setWatcher}

 在该文件中引入watch.js，

   tips：如果有多个页面都需要使用watch监听，可以直接在app.js中引入该文件，注册成全局函数，这样就不用每个文件都去引入watch.js了，只需要在使用的页面onLoad的时候调用一次该函数，就能愉快的使用watch了。

import { setWatcher } from '../../utils/watch';

 js代码

 data: {    n1:1,    n2:0,    sum:0,    obj: {},  },  addn1(){    this.setData({          n1:this.data.n1+1,    })  },  addn2(){    this.setData({          n2:this.data.n2+1,    })  },  onLoad(options) {  // 在onload的时候调用一次监听函数，然后就可以像vue一样愉快的使用watch了    setWatcher(this);  },  // 用法完全和vue一样，也能实现对象的深度监听  watch: {    n1(n1) {        console.log(n1)        this.setData({          sum:n1+this.data.n2        })    },    n2(n2) {      console.log(n2)      this.setData({        sum:n2+this.data.n1      })    },    obj: {      handler(v) {       console.log(v)      },      deep: true    }  },