微信小程序实现watch监听
Vue提供了一种通用的方式来观察和响应Vue实例上的数据变动：监听属性watch。
虽然watch的滥用会导致性能不佳，但在一些情况下我们还是需要watch，使得代码更加简洁、逻辑更加清晰(其实就是嫌麻烦...)。
小程序实现类似vue一样的watch监听数据
将方法注册到app.js中也可以使用高级一点的写法
使用装饰器模式将小程序page重写挂在到生命周期函数上或者挂在页面this上每次就不需要重新在调用初始化一次。本文对装饰器模式不做介绍这是个思路。等待下次实现
setWatcher(page){
letdata=page.data;//获取page页面data
letwatch=page.watch;
for(letiinwatch){
letkey=i.split('.');//将watch中的属性以'.'切分成数组
letnowData=data;//将data赋值给nowData
letlastKey=key[key.length-1];
letwatchFun=watch[i].handler||watch[i];//兼容带handler和不带handler的两种写法
letdeep=watch[i].deep;//若未设置deep,则为undefine
this.observe(nowData,lastKey,watchFun,deep,page);//监听nowData对象的lastKey
}
},
/\*\*
\*监听属性并执行监听函数
\*/
observe(obj,key,watchFun,deep,page){
letval=obj[key];
//判断deep是true且val不能为空且typeofval==='object'（数组内数值变化也需要深度监听）
if(deep&&val!=null&&typeofval==='object'){
for(letiinval){
this.observe(val,i,watchFun,deep,page);//递归调用监听函数
}
}
letthat=this;
Object.defineProperty(obj,key,{
configurable:true,
enumerable:true,
set:function(value){
//用page对象调用,改变函数内this指向,以便this.data访问data内的属性值
watchFun.call(page,value,val);//value是新值，val是旧值
val=value;
if(deep){//若是深度监听,重新监听该对象，以便监听其属性。
that.observe(obj,key,watchFun,deep,page);
}
},
get:function(){
returnval;
}
})
}
页面使用：
onLoad:function(){
app.setWatcher(this);
setTimeout(()=>{
this.setData({
name:"kangbosodoa"
})
},2000)
},
watch:{
name:{
handler(newValue,oldvalue){
console.log(this)
console.log(newValue,oldvalue,"变化了");
},
deep:true
},
type:{
handler(newValue){
console.log(newValue,"属性发生变化");
},
deep:true//是否深度监听
}
},
到此这篇关于微信小程序实现watch监听的文章就介绍到这了,更多相关小程序watch监听内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！