原生微信小程序使用watch监听数据变化的方法

考虑多个页面需要监听需求，可以把监听方法写在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方法中调用app.js的watch方法

 

const app = getApp()
Page({
  data: {
    testValue: 0
  },
  onLoad: function () {
    // 调用监听器，监听数据变化
    app.watch(this, {
      testValue: function (newVal) {
        console.log(newVal)
      }
    })
  }

注： testValue是需要监听的数据