【微信小程序】- 监听全局globalData数据

数据劫持（Object.defineProperty）
- 实现
- 适用场景

数据劫持（Object.defineProperty）

实现

通过拦截 globalData 的属性读写实现自动监听，适合精确监听特定变量。

实现步骤：

在 app.ts/app.js 中劫持数据属性：

ts 复制代码

// app.ts
App({
  globalData: {
    userInfo: {},
  },
  ...
  // 定义劫持方法
  defineWatcher: function(key, callback) {
    const obj = this.globalData;
    let val = obj[key];
    Object.defineProperty(obj, key, {
      set: (value) => {
        val = value;
        callback(value); // 触发回调
      },
      get: () => val
    });
  }
})

在页面中启用劫持监听：

ts 复制代码

// 需要监听页面的对应ts/js文件
Page({
  onLoad() {
    const app = getApp();
    app.defineWatcher('userInfo', (newVal: any) => {
		this.setData({
   			avatarUrl: newVal.avatarUrl,
    		nickName: newVal.nickName
	 	});
	});
  }
});

适用场景

适用场景：精确监听特定变量

优势：自动触发，无需显式调用更新

限制：兼容性依赖 ES5，无法监听新增属性