关于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来监听对象属性的获取和批改。