微信小程序,实现vue-watch
- 监听数据有三种情况
- 监听某个属性
- 监听my.name…类似
- 监听多层对象 deep
call用法
function setWatcher (page) {
//page 小程序page对象(this)
let obj = page.data,
watch = page.watch;
Object.keys(watch).forEach(w => {
let newData = obj;
//定义初始值,deep监听返回初始对象
let initialObj = JSON.parse(JSON.stringify(obj))[w]
//监听类似my.name
let keys = w.split('.');
//实现原理,监听最后一个 **.** 后面得值
//例如 my.name 则监听name
let watchKey = keys[keys.length - 1];
//获取需要监听得上一层对象
for (let i = 0; i < keys.length - 1; i++) {
newData = newData[keys[i]];
}
// 监听回调函数(deep 则handler)
let watchFun = watch[w]['handler'] || watch[w];
//是否为深度监听
let deep = watch[w]['deep'];
//obj[w] 深度监听修改后对象
observe(newData, watchKey, watchFun, deep, page, initialObj, obj[w])
})
}
function observe (obj, key, watchFun, deep, page, initialObj, nowObj) {
let val = obj[key];
//判断是否为深度监听,是则递归设置监听
if (val && typeof val === 'object' && deep) {
Object.keys(val).forEach(k => {
observe(val, k, watchFun, deep, page, initialObj, nowObj)
})
}
Object.defineProperty(obj, key, {
configurable: true,
enumerable: true,
get: function () {
return val
},
set: function (nval) {
if (deep) {
// 深度监听返回新对象,原始对象
// call使用为了回调函数内this能访问page内对象
watchFun.call(page, nowObj, initialObj);
} else {
watchFun.call(page, nval, val);
}
val = nval;
}
})
}
module.exports = setWatcher;
//引入
var watcher = require('../../utils/watch.js');
onLoad() {
//设置监听
watcher(this);
}
watch: {
'username': function (newValue) {
console.log(newValue, this); // username改变时,调用该方法输出新值。
},
'userInfo': {
handler(newValue, value){
console.log(newValue, value, 'deep'); // userInfo改变时,调用该方法输出新值。
},
deep: true
}
},