小程序使用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)
}
})
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
热门推荐
10 新人红包祝福语简短精辟
11 幼师给毕业祝福语简短
12 生日高考祝福语妹妹简短
13 下飞机祝福语简短英文
14 元宵发客户祝福语简短
15 爸妈金婚文案祝福语简短
16 新郎朋友红包祝福语简短
17 虎年五一祝福语大全简短
18 出阁宴祝福语姐姐简短