简介
目前文章主要介绍对页面属性值的监听以及组件属性值的监听。需要异页面监听数据,请跳转至另一个文章介绍
为什么需要监听属性值
当需要通过一个属性变化时候,需要计算相应的方法等。pc网站经常需要监听属性,那么小程序应该怎么去实现?
实现方法
1、首先创建公共的watch.js
javascript
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。
javascript
import { setWatcher } from '../../utils/watch';
3、初始化监听方法
javascript
setWatcher(this);//可以放进onload或者input里面等
4、写入监听方法
javascript
//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然后监听属性值即可。大大提高开发的效率。有不足之处望指正修改,一起探讨哦~!