微信小程序监听 watch方法

微信小程序监听 watch方法

使用过vue框架的应该使用过watch监听变量
那么 在微信小程序中 怎么使用watch
首先我们需要引入一个watch.js文件到我们的全局中

  // 监听页面数据变化
  function initWatch(_page) {
    
    

    if (!_page) {
    
    
      console.error('未检测到Page对象,请将当前page传入该函数');
      return false;
    }
    if (!_page.watch) {
    
     //判断是否有需要监听的字段
      console.error('未检测到Page.watch字段(如果不需要监听，请移除initWatch的调用片段)');
      return false;
    }
    let _dataKey = Object.keys(_page.data);
    Object.keys(_page.watch).map((_key) => {
    
     //遍历需要监听的字段
      _page.data['__' + _key] = _page.data[_key]; //存储监听的数据
      if (_dataKey.includes(_key)) {
    
     //如果该字段存在于Page.data中，说明合法
        Object.defineProperties(_page.data, {
    
    
          [_key]: {
    
     //被监听的字段
            enumerable: true,
            configurable: true,
            set: function (value) {
    
    
              let oldVal = this['__' + _key];
              if (value !== oldVal) {
    
     //如果新设置的值与原值不等，则触发监听函数
                setTimeout(function () {
    
     //为了同步,否则如果回调函数中有获取该字段值数据时将不同步,获取到的是旧值
                  _page.watch[_key].call(_page, oldVal, value); //设置监听函数的上下文对象为当前的Page对象并执行
                }.bind(this), 0)
              }
              this['__' + _key] = value;
            },
            get: function () {
    
    
              return this['__' + _key]
            }
          }
        })
      } else {
    
    
        console.error('监听的属性[' + _key + ']在Page.data中未找到，请检查~')
      }
    })
  }
  module.exports = {
    
    
    initWatch: initWatch
  }

引入到我们全局app.js中

然后下面挂在一下

当我们准备好之后
下面就开始运用到我们页面上

const app = getApp()

  app.util.initWatch(this)

watch: {
    
     //需要监听的字段
    'complete': function (oldValue, newValue) {
    
    
      console.log('监听数据-complete', oldValue, newValue)
    },
  },

使用效果

监听函数返回第一个数是老值,第二个数是新值