搞懂Vue响应式原理——监听对象

Posted 2021-09-13 Kali

源代码如下：

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