Vue源码透析之数据响应

    function observe(value) {
        if (typeof value != 'object') {
            return
        }
        let ob;
        if (value.__ob__ !== undefined) {
            ob = value.__ob__;
        } else {
            ob = new Observer(value);
        }
        return ob;
    }
    function defineReactive(data, key, val) {
       if(!val){
        val = data[key];
       }
        Object.defineProperty(data, key, {
            get() {
                return val;
            },
            set(newVal) {
                console.log('修改了属性:' + key)
                val = newVal;
                observe(newVal);
            }
        })
        observe(val)
    }

    class Observer {
        constructor(val){
            Object.defineProperty(val, '__ob__', {
                value: this,
                enumerable: false
            });
            this.walk(val);
        }

        walk(value){
            for (let k in value) {
                defineReactive(value, k)
            }
        }
    }
  // 测试
    var obj = {
        a: 1,
        b: {
            c: 2
        }
    }
    observe(obj)

  

posted @ 2022-09-20 15:43  豆浆不要油条  阅读(17)  评论(0编辑  收藏  举报