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

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

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

数据劫持（Object.defineProperty）

实现

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

​实现步骤​：

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

   // 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
       });
     }
   })

2. 在页面中启用劫持监听：

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

适用场景

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

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

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