微信小程序自定义监听器_setdata object.defineproperty

微信小程序中，没有内置的watch 方法，来观察数据的变化，但是可以通过自定义实现类似的功能

遇到的问题：

• 使用 Object.defineProperty() 拦截，对应的属性字段，，但是需要给这个字段备份，，因为在set ，和 get 的时候，如果get 返回是 this.data.xxx ,那么会进入get的死循环，，因为 this.data.xxx 就相当于执行这个xxx属性的get方法，，
  同理 setData去赋值，也会陷入死循环

• 当修改并不是监听的属性值，，也会走 Object.defineProperty() 的 get方法 ，，，不知道为什么，。。当 setData() 其他属性值的时候，也会走 Object.defineProperty()的get方法，不会走 set 方法

• Object.defineProperty() 使用
  Object.defineProperty() 对属性的行为进行更精细的控制
  

// pages/test/test.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    count:0,
      observeCount:0,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // this.observe("data.count",this.handleCountChange)
    this.watch()
  },
 watch(){
    let that = this

     Object.defineProperty(that.data,"observeCount",{
         // 属性是否可以被配置，或者修改
         configurable:true,
         // 是否可以被枚举
         enumerable:true,
         get:function (){
             console.log("11111")
             // 这个方法  相当于就是  observeCount 的get方法，无线递归
             return that.data.count
         },
         set:function (newVal){
             // console.log(that.data.observeCount)

             if (newVal !== that.data.count){
                 // 根据改变的值  去更新 count
                 var oldVal = that.data.observeCount;

                 console.log(`oldval : ${oldVal} ---new val is ${newVal}`)
                 that.setData({
                     count:newVal
                 })

             }

         }
     })

 },
  handleIncrement(){
    console.log(this.data.observeCount,"observe count")
          this.setData({
              observeCount:++this.data.observeCount
          })
  },





})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

{{ count }}
<button bindtap="handleIncrement">add</button>
1
2