小程序添加watch监听器

 

原理就是利用Object.defineProperty去监听每一个属性值变化

 

app.js添加(全局添加方便调用)

//obj:页面对应的data对象，key:需要监听的属性名称,watchFun：watch里面属性key对应的方法

observe(obj,key,watchFun){
     var oldValue=obj[key];//保存旧值
      
       Object.defineProperty(obj,key,{
        configurable:true,//属性可配置
        enumerable:true,//属性可枚举
    
        set(newValue){
          watchFun(newValue,oldValue);//newValue:新值，oldValue：旧值
          oldValue=newValue;
         
        },
        get(){
          return oldValue
        }
      })

  },

//遍历watch里面的属性
  setWatch(data,watch){//data:页面对应的data对象,watch:页面对应watch对象
      Object.keys(watch).forEach(v=>{
        this.observe(data,v,watch[v])
      })
  },

每个页面onload调用

  onLoad: function (options) {
    
    getApp().setWatch(this.data,this.watch);
    
  }, 

就可以像vue一样监听属性

Page({
   
  data:{
    name:'张三'
   },
  watch:{
        name(newval,oldval){
            console.log(newval,oldval);
        }
  },
 
})