WeChat アプレットは数値監視 (ページとコンポーネントのプロパティ) を実装します。

導入

今回の記事では主にページ属性値の監視とコンポーネント属性値の監視について紹介します。別のページのデータを監視する必要がある場合は、別の記事の紹介にジャンプしてください。

属性値を監視する必要があるのはなぜですか?

属性を変更する必要がある場合は、対応するメソッドを計算する必要があります。PC の Web サイトでは属性を監視する必要があることがよくありますが、小さなプログラムではどのように実装すればよいでしょうか?

実装

1. まずパブリックwatch.jsを作成します

export function setWatcher(page) {
    let data = page.data;
    let watch = page.watch;
    Object.keys(watch).forEach(v => {
        let key = v.split('.');
        let nowData = data;
        for (let i = 0; i < key.length - 1; i++) {
            nowData = nowData[key[i]];
        }
        let lastKey = key[key.length - 1];
        let watchFun = watch[v].handler || watch[v];
        let deep = watch[v].deep;
        observe(nowData, lastKey, watchFun, deep, page);
    })
}
   
function observe(obj, key, watchFun, deep, page) {
    var val = obj[key];
    if (deep && val != null && typeof val === 'object') {
        Object.keys(val).forEach(childKey => {
            observe(val, childKey, watchFun, deep, page);
        })
    }
    Object.defineProperty(obj, key, {
        configurable: true,
        enumerable: true,
        set: function(newVal) {
            watchFun.call(page, newVal, val); 
            val = newVal;
            if (deep) {
                observe(obj, key, watchFun, deep, page);
            }
        },
        get: function() {
            return val;
        }
    })
}
module.exports = {
    setWatcher: setWatcher
}

2. ページ上のパブリック watch.js を参照します。

import { setWatcher } from '../../utils/watch';

3. リスニングメソッドの初期化

setWatcher(this);//可以放进onload或者input里面等

4. 監視メソッドを書く

//page页面
watch: {
        val(v) {
        console.log(v)
        },
        count: {//监听count属性值
        handler(v,o) {
            console.log('新值：'+v,'旧值：'+o)
            if(v!==o){
            console.log('被改了')
            }else{
            console.log('没改')
            }
        },
        deep: true
        }
    },
//组件就调用observe方法

まとめ

微信小程序监听属性值非常的简单，只需要调用公共的js然后监听属性值即可。大大提高开发的效率。有不足之处望指正修改，一起探讨哦~！