微信小程序在page页面中watch监听变量变化_小程序 watch

一、首先在小程序的utils目录下创建一个watch.js文件。

二、watch.js完整代码如下

/**
 * 监听器模块，用于监听数据对象的属性变化
 */
 
function watch(context, variableName, callback) {
  let value = context.data[variableName]; // 获取被监听属性的当前值
 
  // 使用 Object.defineProperty 方法在数据对象上定义属性的 getter 和 setter
  Object.defineProperty(context.data, variableName, {
    configurable: true, // 可配置
    enumerable: true, // 可枚举
    get: function () {
      return value; // 返回属性的当前值
    },
    set: function (newVal) {
      const oldVal = value; // 记录属性的旧值
      value = newVal; // 更新属性的值
      callback.call(context, newVal, oldVal); // 调用回调函数，传递新值和旧值
    }
  });
}
 
module.exports = {
  watch: watch
};

三、在page页对应的js文件顶部引入watch

四、在page页面的onLoad函数中启用监听

    watch.watch(this, 'data中的变量名，不需要this.data,但需要外部引号', (newVal, oldVal) => {
      console.log('监听的变量从 ' + oldVal + ' 变成 ' + newVal);
    });