微信小程序监听data数据变化(类似VUE中的watch)

原文网址：https://github.com/morganfly/morganfly_blog/issues/12
https://blog.csdn.net/xuyangxinlei/article/details/81408200

监听小程序内data的数据变化的方法常见的可以求助于现在已有的一些库.
就我所知
wepy (仿VUE开发风格进行小程序开发的一个框架)
watch
都能满足监听小程序data数据变化的功能.

接下来,我简单介绍一下,监听小程序页面data变化的原理

第一步,先在app.js里了定义一个全局函数,当然也可以单独写一个模版,再通过引入模块的方式来调用

  // 监听页面数据变化
  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中未找到，请检查~')
      }
    })
  },

第二步,在具页面page页面里调用initWatch函数,并编写要watch的相关字段.

const app = getApp()
Page({
    data: {
        appList: [],//应用列表数据    
        pageIndex: 0,//当前页码索引
        isLoading: false//是否正在加载中
    },
    watch: {//需要监听的字段
        'pageIndex': function (value) {
            console.log('监听数据-pageIndex', value, this)
        },
        'isLoading':function(value){
            console.log('监听数据-isLoading', value, this)
        }
    },
    onLoad() {
        app.initWatch(this)//初始化需要监听的字段
    }
})

接下就可以成功监听page中data的数据变化了.