关于javascript:搞懂Vue响应式原理1监听对象

源代码如下：

        //1、第一步 将数据列入跟踪 应用 Object.defineProperty()
        let defineReactive = function (data) {if(!data || typeof data != 'object') return  
            Object.keys(data).forEach(key => {let value = data[key]
                    defineReactive(value)  // 如果 value 还是对象，则对该对象递归持续应用 defineReactive 办法，实现深度绑定
                    Object.defineProperty(data, key, { // 应用该办法监听对象属性的变动
                        enumerable: true,
                        configurable: true,
                        get: function () {console.log(value,'get method')
                            return value
                        },
                        set: function (newValue) {console.log(value,'set method')
                            if (value === newValue) return
                            value = newValue
                        }
                    })
            })
        }
        let obj = {
            a:3,
            b:5,
            c:{c1:7}
        }
        defineReactive(obj)
        // console.log(obj.a);
        console.log(obj.c.c1) // 返回值为 7，调用前输入 7 "get method"
        // obj.a = 30
        obj.c.c1 = 70 // 输入 7 "set method"
        // console.log(obj.a);
        console.log(obj.c.c1) // 返回值为 70，调用前输入 70 "get method"

能够看到，在批改或者调用 obj 对象的属性时，相应操作曾经被监听到并输入提示信息。此时咱们曾经实现对该对象的监听，并应用递归，在其属性值仍是对象时持续深刻监听。外围是应用 Object.defineProperty 来监听对象属性的获取和批改。