小程序使用watch监听数据变化的方法详解
众所周知,Vue中,可以使用监听属性watch来观察和响应Vue实例上的数据变化,那么小程序能不能实现这一点呢?
监听器的原理,是将data中需监听的数据写在watch对象中,并给其提供一个方法,当被监听的数据的值改变时,调用该方法。
我们需要用到Javascript中的Object.defineProperty()方法,来手动劫持对象的getter/setter,从而实现给对象赋值时(调用setter),执行watch对象中相对应的函数,达到监听效果。
Object.defineProperty()方法,会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回这个对象。
这里假定有多个页面需要监听需求,把监听方法写在app.js中,以便全局调用
onLaunch:function(){}, //设置监听器 watch:function(ctx,obj){ Object.keys(obj).forEach(key=>{ this.observer(ctx.data,key,ctx.data[key],function(value){ obj[key].call(ctx,value) }) }) }, //监听属性,并执行监听函数 observer:function(data,key,val,fn){ Object.defineProperty(data,key,{ configurable:true, enumerable:true, get:function(){ returnval }, set:function(newVal){ if(newVal===val)return fn&&fn(newVal) val=newVal }, }) }
然后,在需要监听的页面onLoad中,调用watch方法(其中test是要监听的数据,当test在其他方法中通过this.setData赋值后,watch就能监听到test的变化了)
constapp=getApp() Page({ data:{ test:0 }, onLoad:function(){ //调用监听器,监听数据变化 app.watch(this,{ test:function(newVal){ console.log(newVal) } }) }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。