關於微信小程序使用watch監聽數據變化的方法

眾所周知，Vue中，可以使用監聽屬性 watch來觀察和響應 Vue 實例上的數據變化，那么小程序能不能實現這一點呢？

監聽器的原理，是將data中需監聽的數據寫在watch對象中，並給其提供一個方法，當被監聽的數據的值改變時，調用該方法。​​

我們需要用到Javascript中的Object.defineProperty()方法，來手動劫持對象的getter/setter，從而實現給對象賦值時(調用setter)，執行watch對象中相對應的函數，達到監聽效果。 

Object.defineProperty()方法，會直接在一個對象上定義一個新屬性，或者修改一個對象的現有屬性， 並返回這個對象。

 

這里假定有多個頁面需要監聽需求，把監聽方法寫在app.js中，以便全局調用

onLaunch: function () {},
// 設置監聽器
watch: function (ctx, obj) {
  Object.keys(obj).forEach(key => {
    this.observer(ctx.data, key, ctx.data[key], function (value) {
      obj[key].call(ctx, value)
    })
  })
},
// 監聽屬性，並執行監聽函數
observer: function (data, key, val, fn) {
  Object.defineProperty(data, key, {
    configurable: true,
    enumerable: true,
    get: function () {
      return val
    },
    set: function (newVal) {
      if (newVal === val) return
      fn && fn(newVal)
      val = newVal
    },
  })
}

 

然后，在需要監聽的頁面onLoad中，調用watch方法（其中test是要監聽的數據，當test在其他方法中通過this.setData賦值后，watch就能監聽到test的變化了）

const app = getApp()
Page({
  data: {
    test: 0
  },
  onLoad: function () {
    // 調用監聽器，監聽數據變化
    app.watch(this, {
      test: function (newVal) {
        console.log(newVal)
      }
    })
  }