微信小程序数据监听

桃扇骨 2024-04-18 19:51 63阅读 0赞

## 微信小程序数据监听 ##

###### 小程序类似于vue的watch,监听data数据变化 ######

# `*人狠话不多，直接代码搞起*` #

--------------------

**在utils.js里定义方法，供其他页面使用**  
`utils.js`

/**设置监听器**/
    	export function setWatcher(page) { 
    	    let data = page.data;
    	    let watch = page.watch;
    	    Object.keys(watch).forEach(v => { 
    	        let key = v.split('.'); // 将watch中的属性以'.'切分成数组
    	        let nowData = data; // 将data赋值给nowData
    	        for (let i = 0; i < key.length - 1; i++) {  // 遍历key数组的元素，除了最后一个！
    	            nowData = nowData[key[i]]; // 将nowData指向它的key属性对象
    	        }
    	        let lastKey = key[key.length - 1];
    	        // 假设key==='my.name',此时nowData===data['my']===data.my,lastKey==='name'
    	        let watchFun = watch[v].handler || watch[v]; // 兼容带handler和不带handler的两种写法
    	        let deep = watch[v].deep; // 若未设置deep,则为undefine
    	        observe(nowData, lastKey, watchFun, deep, page); // 监听nowData对象的lastKey
    	    })
    	}
    	/**监听属性 并执行监听函数**/
    	function observe(obj, key, watchFun, deep, page) { 
    	    var val = obj[key];
    	    // 判断deep是true 且 val不能为空 且 typeof val==='object'（数组内数值变化也需要深度监听）
    	    if (deep && val != null && typeof val === 'object') { 
    	        Object.keys(val).forEach(childKey => {  // 遍历val对象下的每一个key
    	            observe(val, childKey, watchFun, deep, page); // 递归调用监听函数
    	        })
    	    }
    	    let that = this;
    	    Object.defineProperty(obj, key, { 
    	        configurable: true,
    	        enumerable: true,
    	        set: function (value) { 
    	            watchFun.call(page, value, val); // value是新值，val是旧值
    	            val = value;
    	            if (deep) {  // 若是深度监听,重新监听该对象，以便监听其属性。
    	                observe(obj, key, watchFun, deep, page);
    	            }
    	        },
    	        get: function () { 
    	            return val;
    	        }
    	    })
    	}
    	module.exports = { 
    	    setWatcher: setWatcher
    	}

**页面中使用：**  
`index.js`

//引入封装的watch监听文件
    	const watch = require('../../utils/utils.js')
    	
    	Page({ 
    	    //页面的初始数据
    	    data: { 
    	        isAuthor:false //设置一个测试值为 false
    	    },
    	    //生命周期函数--监听页面加载
    	    onLoad: function (options) { 
    	        watch.setWatcher(this); // 设置监听器,建议在onload里设置
    
    			//改变测试值
    			this.setData({ 
    				isAuthor:true
    			})
    	    },
    	    //监听data里的数据
    	    watch: { 
    	        isAuthor: function(newValue,oldValue) { 
    	            console.log(newValue,oldValue '查看data里数据的变化');//newValue : true , oldValue : false
    	        },
    	    },
    	})