微信小程序中使用watch监听

想直接使用的走这边 https://blog.csdn.net/singlever/article/details/106276787

Vue里面的监听很方便，虽然很消耗资源，但确实有些时候极大提升了开发效率

我的案例是写在component组件里面的，当然page页面也是一样的，把 attached 换成 onload
把 watch 直接写入 Page 里面即可

Component({
  properties: {},
  data: {
    // 这里是一些组件内部数据
    ze:'123',
    dd:'312'
  }, 
  methods: {
    watch(){
      return{
        ze:(val) => {
          console.log(val)
        }
      }
    },
    btns(){
      this.setData({ze:321})
    }
  },
  attached(){   //类似于beforeMounted 组件挂载前
    Object.keys(this.watch()).some(item => {
      Object.defineProperty(this.data,item,{
        set:this.watch()[item]
      })  
    })
  }
})

需要监听的变量，和vue的写法一样，写入watch中，不过，这里要加到 return 中即可 例如 例子 ze
如果监听需要调用到  this.setData()  把监听的函数结构换成箭头函数 例如 例子 ze

总的来说没有什么技术难点，主要依靠原生的Object APi   Object.defineProperty() 没有学过的可以看下

跟进：
如果直接在watch中直接把val赋值给变量，这里只在逻辑层发生了变化，如果要将数据同步到视图层，在watch中直接setData会报错例如：
 

        ze:(val) => {
          this.setData({ze:val})
        }
//erorr

因为本质上watch中的ze函数是本质是个set，在一个变量的set中给自己赋值，这是个死循环，当然会报错，可能会有更好的办法
因为某些原因暂时没时间了，给出
方法1：
 

Component({
  properties: {},
  data: {
    // 这里是一些组件内部数据
    ze:'123', //逻辑层数据
    dd:'312', //视图层数据
  }, 
  methods: {
    watch(){
      return{
        ze:(val) => {
          this.setData({dd:val})
        }
      }
    }
  }

通过监听ze去改变dd，dd就相当于ze在视图层的替身，问题：1.变量浪费  2.不好看（hhh）

 

// 2020 5.22
抽空封装了下 https://blog.csdn.net/singlever/article/details/106276787