微信小程序实现类Vue-watch数据监听_微信小程序watch

1. 在 app.js 里了定义一个全局函数，当然也可以单独写一个模版，再通过引入模块的方式来调用

// 监听页面数据变化
initWatch(_page) {
    if (!_page) {
        console.error('未检测到Page对象,请将当前page传入该函数');
        return false;
    }
    if (!_page.watch) { //判断是否有需要监听的字段
        console.error('未检测到Page.watch字段(如果不需要监听，请移除initWatch的调用片段)');
        return false;
    }
    let _dataKey = Object.keys(_page.data);
    Object.keys(_page.watch).map((_key) => { //遍历需要监听的字段
        _page.data['__' + _key] = _page.data[_key]; //存储监听的数据
        if (_dataKey.includes(_key)) { //如果该字段存在于Page.data中，说明合法
            Object.defineProperties(_page.data, {
                [_key]: { //被监听的字段
                    enumerable: true,
                    configurable: true,
                    set: function(value) {
                        let oldVal = this['__' + _key];
                        if (value !== oldVal) { //如果新设置的值与原值不等，则触发监听函数
                            setTimeout(function() { //为了同步,否则如果回调函数中有获取该字段值数据时将不同步,获取到的是旧值
                                _page.watch[_key].call(_page, oldVal, value); //设置监听函数的上下文对象为当前的Page对象并执行
                            }.bind(this), 0)
                        }
                        this['__' + _key] = value;
                    },
                    get: function() {
                        return this['__' + _key]
                    }
                }
            })
        } else {
            console.error('监听的属性[' + _key + ']在Page.data中未找到，请检查~')
        }
    })
}
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

2. 在具体页面里调用 initWatch 函数，并编写要watch的相关字段

const app = getApp()
Page({
    data: {
        currYear: ''
    },
    watch: {
    	// 需要监听的字段
        'currYear': function (value) {
            console.log('监听数据-currYear', value, this)
            // ......
        }
    },
    onLoad() {
        app.initWatch(this) // 初始化需要监听的字段
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

参考链接