原理
将globalData使用proxy代理，使用递归将每层属性都添加订阅者队列，使用watch函数监听其中的对象，当被监听对象发生改变时通知订阅者队列中的所有订阅者更新自己的值。
工具文件 ProxyUtils.js
该文件到导出一个函数，将该文件拷贝到小程序目录下，app.js中引入并使用处理globalData，具体使用方法请看示例
// ./ProxyUtils.jsfunction ProxyUtils(data) {if (typeof data === 'object' && data != null) {// console.log(data, 3)data = new Proxy(data, {get: function (target, p) {return Reflect.get(target, p)},set: function (target, p, value) {if (target.hasOwnProperty(p) && value === target[p]) return truelet temp = ProxyUtils(value)if (Reflect.set(target, p, temp)) {data.notify()return true} else {return false}},})Object.defineProperties(data, {subs: {enumerable: false,value: []},notify: {enumerable: false,value: function () {data.subs.forEach(watcher => {watcher(this)});}},watch: {enumerable: false,value: function (fn) {data.subs.push(fn)fn(this)return {destory: function () {data.subs.splice(data.subs.indexOf(fn), 1)}}}}})}return data}module.exports = ProxyUtils
示例
1、拷贝到目录下后，app.js中引入并处理globalData
// app.jsconst ProxyUtils = require('./utils/ProxyUtils.js') // 你的文件路径，我这里是根目录下的 utils文件夹下App({...// 其他代码onLaunch: function () {this.globalData = ProxyUtils({});// 将globalData变为响应式this.globalData.userInfo = {};//放入一个userInfo对象记录用户信息，为了其他页面调用方便，ProxyUtils会对所有新赋值的对象进行处理...// 其他代码}...// 其他代码});
2、在其他页面监听globalData
// pages/menu/index.jsPage({/*** 页面的初始数据*/data: {userInfo: {}},/*** 生命周期函数--监听页面加载*/onLoad(options) {// 调用 globalData.userInfo 的 watch 函数进行监听，globalData 的其他对象属性（非基础数据类型的属性） 或 globalData对象 都可调用watch函数进行监听，// 传入回调函数，回调函数的参数就是被监听对象的当前值，第一次调用和被监听对象更新是会被触发// watch函数会返回一个对象，该对象有 destory 方法可销毁当前监听，将对象保存，可在页面关闭时调用 destory，避免内存泄漏this.watcher = getApp().globalData.userInfo.watch(obj => {console.log('watch new value=> ', obj);// 当值发生变化时，打印新的值this.setData({userInfo: obj})})},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {// 测试// 当页面加载完成时，修改 globalData.userInfo.openId 属性setTimeout(() => {getApp().globalData.userInfo.openId = 'test123'// 这里会触发上面的回调 打印出 “'watch new value=>” 相关字段console.log('after set,before destory');this.watcher.destory()// 对监听对象进行销毁，销毁后再次修改 globalData.userInfo.openId 属性，检查是否被销毁}, 3000);setTimeout(() => {getApp().globalData.userInfo.openId = 'test321'// 如果没被销毁，这里会触发上面的回调 打印出 “'watch new value=>” 相关字段console.log('after set,after destory');}, 4000);},})
3、测试结果
在第一行可以看到，在页面第一次进入时，我们监听了 globalData.userInfo，并通过回调函数立马获得了该对象，该对象此时并没有 openId 的字段属性。
3s 后，我们对 globalData.userInfo 进行了修改，触发了回调函数获取到了新值，此时 openId 的值为我们修改后的 ‘test123’ ，然后我们调用 destory() 销毁监听继续进行测试。
4s 后，我们再次对 globalData.userInfo 进行了修改，但此时并没有触发回调函数打印出 “watch =>” 等字样，说明监听对象已经被销毁。
如果觉得《微信小程序 globalData监听 proxy代理 复制可用 使用方便》对你有帮助，请点赞、收藏，并留下你的观点哦！
