全局监听globalData的某个属性变化
# 前言
近日在开发微信小程序的时候，要将globalData中某个属性的变化要同步到某个页面中。
# 使用Object.defineProperty()监听属性全局更改
经过上网查询相关资料，参考vue实现数据双向绑定原理：采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。
1️⃣ 在app.js中添加以下代码
//app.js
App({
onLaunch: function() {},
onShow: function() {},
onHide: function() {
// wx.stopLocationUpdate()
},
watch: function(key, method) {
var obj = this.globalData;
//加个前缀生成隐藏变量，防止死循环发生
let ori = obj[key]; //obj[key]这个不能放在Object.defineProperty里
if (ori) { //处理已经声明的变量，绑定处理
method(ori);
}
Object.defineProperty(obj, key, {
configurable: true,
enumerable: true,
set: function(value) {
this['_' + key] = value;
console.log('是否会被执行2')
method(value);
},
get: function() {
// 在其他界面调用key值的时候，这里就会执行。
if (typeof this['_' + key] == 'undefined') {
if (ori) {
//这里读取数据的时候隐藏变量和 globalData设置不一样，所以要做同步处理
this['_' + key] = ori;
return ori;
} else {
return undefined;
}
} else {
return this['_' + key];
}
}
})
},
globalData: {
count:0
},
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
2️⃣ 在page.js中添加以下代码
const app=getApp();
Page({
/**
* 页面的初始数据
*/
data: {
count:0
},
//
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
app.watch('count',(v)=>{
that.setData({
count:v
})
})
},
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 总结
🎉🎉🎉在这里，代码就已经写完了，重复修改全局中的count属性，某个page页面中的监测这个属性的方法也会执行。 重温了Object.defineProperty方法。nice!!!❤️❤️❤️❤️❤️💯
在 GitHub 上编辑此页 ！ (opens new window)
上次更新: 2021/09/02, 04:08:13