.3-Vue源码之数据劫持(1)

写了一半关机了,又得重新写,好气。

 

  上一节讲到initData函数,其中包含格式化、代理、监听。

    // Line-3011
    function initData(vm) {
        var data = vm.$options.data;
        //data = vm._data = ... 格式化data
        // ...proxy(vm, "_data", keys[i]); 代理
        // 监听
        observe(data, true /* asRootData */ );
    }

  这一节重点开始跑observe函数,该函数接受2个参数,一个是数据,一个布尔值,代表是否是顶层根数据。

    // Line-899
    function observe(value, asRootData) {
        if (!isObject(value)) {
            return
        }
        var ob;
        // 判断是否有__ob__属性 即是否已被监听
        if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
            ob = value.__ob__;
        }
        // 若无进行条件判断 
        else if (
            observerState.shouldConvert && // 是否应该被监听 默认为true
            !isServerRendering() && // 是否是服务器渲染
            (Array.isArray(value) || isPlainObject(value)) && // 数据必须为数组或对象
            Object.isExtensible(value) && // 是否可扩展 => 能添加新属性
            !value._isVue // vue实例才有的属性
        ) {
            // 生成一个观察者
            ob = new Observer(value);
        }
        // 根数据记数属性++
        if (asRootData && ob) {
            ob.vmCount++;
        }
        return ob
    }

  observe函数除去大量的判断,关键部分就是new了一个观察者来进行数据监听,所以直接跳进该构造函数:

    // Line-833
    var Observer = function Observer(value) {
        // data
        this.value = value;
        // 依赖收集
        this.dep = new Dep();
        this.vmCount = 0;
        // 通过Object.defineProperty定义__ob__属性 this指向Observer实例
        def(value, '__ob__', this);
        // 根据类型调用不同的遍历方法
        if (Array.isArray(value)) {
            var augment = hasProto ?
                protoAugment :
                copyAugment;
            augment(value, arrayMethods, arrayKeys);
            this.observeArray(value);
        } else {
            this.walk(value);
        }
    };

  这个构造函数给实例绑了3个属性,分别为data对象的value、记数用的vmCount、依赖dep,接着根据数据类型调用不同的遍历方法进行依赖收集。  

  Dep对象比较简单,包含2个属性和4个对应的原型方法,如下:

    // Line-720
    // 超级简单
    var Dep = function Dep() {
        this.id = uid++;
        this.subs = [];
    };
    // 原型方法
    Dep.prototype.addSub = function addSub(sub) {
        this.subs.push(sub);
    };
    Dep.prototype.removeSub = function removeSub(sub) {
        remove(this.subs, sub);
    };
    Dep.prototype.depend = function depend() {
        if (Dep.target) {
            Dep.target.addDep(this);
        }
    };
    Dep.prototype.notify = function notify() {
        // stabilize the subscriber list first
        var subs = this.subs.slice();
        for (var i = 0, l = subs.length; i < l; i++) {
            subs[i].update();
        }
    };

  可见,new出来的dep实例只有2个属性,一个是每次+1的计数uid,还有一个是依赖收集数组。

  原型上的4个方法分别对应增、删、添加依赖、广播,由于暂时用不到update函数,所以先放着。

  

  接着,用自定义的def方法把__ob__属性绑到了生成的observe实例上,该属性引用了自身。

 

  最后,根据value是类型是数组还是对象,调用不同的方法进行处理。案例中传进来的value是一个object,所以会跳到walk方法中。

  这里不妨看看如果是数组会怎样。

    // Line-838
    if (Array.isArray(value)) {
        // 判断是否支持__proto__属性
        var augment = hasProto ?
            protoAugment :
            copyAugment;
        // 原型扩展
        augment(value, arrayMethods, arrayKeys);
        // 数组监听方法
        this.observeArray(value);
    }

  其中,根据环境是否支持__proto__分别调用protoAugment或copyAugment,这两个方法比较简单,上代码就能明白。

    // Line-876
    function protoAugment(target, src) {
        // 直接指定原型
        target.__proto__ = src;
    }
    
    // Line-887
    function copyAugment(target, src, keys) {
        // 遍历keys
        // 调用def(tar,key,value) => (tar[key] = (value => src[key]))
        for (var i = 0, l = keys.length; i < l; i++) {
            var key = keys[i];
            def(target, key, src[key]);
        }
    }

  选择了对应的方法就开始调用,传进的参数除了value还是两个奇怪的值:arrayMethods、arrayKeys。

    // Line-767
    // 创建一个对象 原型为数组对象的原型
    var arrayProto = Array.prototype;
    var arrayMethods = Object.create(arrayProto);
    console.log(Array.isArray(arrayMethods)); //false
    console.log('push' in arrayMethods); //true
    
    // Line-814
    var arrayKeys = Object.getOwnPropertyNames(arrayMethods);

  简单来讲,arrayMethods就是一个对象,拥有数组的方法但不是数组。

  Object.getOwnPropertyNames方法以数组形式返回对象所有可枚举与不可枚举方法,所以arrayKeys直接在控制台打印可以看到:

 

  最后,不管选择哪个方法,都会将“改造过”的数组方法添加到value对象上,由于代码跑不到,等下次给出具体值吧。这里接着会调用observeArray方法,将数组value穿进去。

    // Line-865
    Observer.prototype.observeArray = function observeArray(items) {
        // 遍历分别调用observe方法
        for (var i = 0, l = items.length; i < l; i++) {
            observe(items[i]);
        }
    };

  绕了一圈,最后还是遍历value,挨个调用observe方法,并指向了walk方法。

    // Line-855
    Observer.prototype.walk = function walk(obj) {
        // 获取对象的键
        var keys = Object.keys(obj);
        for (var i = 0; i < keys.length; i++) {
            // 核心方法
            defineReactive$$1(obj, keys[i], obj[keys[i]]);
        }
    };

  这个方法比较简单,获取传进来的对象键,遍历后调用defineReactive$$1方法。看名字也就差不多明白了,这是响应式的核心函数,双绑爸爸。

  下节再来说这个,完结完结!  

 

 

补充tips:

  之前有一段代码,我说将改造过的数组方法添加到数组value上,这个改造是什么意思呢?其实关于arrayMethods代码没有全部贴出来,这里做简单的解释。

    // Line-767
    var arrayProto = Array.prototype;
    var arrayMethods = Object.create(arrayProto);
    // 以下数组方法均会造成破坏性操作
    [
        'push',
        'pop',
        'shift',
        'unshift',
        'splice',
        'sort',
        'reverse'
    ]
    .forEach(function(method) {
        // 缓存原生方法
        var original = arrayProto[method];
        // 修改arrayMethods上的数组方法
        def(arrayMethods, method, function mutator() {
            // 将argument转换为真数组
            var arguments$1 = arguments;
            var i = arguments.length;
            var args = new Array(i);
            while (i--) {
                args[i] = arguments$1[i];
            }
            // 首先执行原生方法
            var result = original.apply(this, args);
            var ob = this.__ob__;
            var inserted;
            // 值添加方法
            // push和unshift会添加一个值 即args
            // splice(a,b,c,..)方法只有c后面是添加的值 所以用slice排除前两个参数
            switch (method) {
                case 'push':
                    inserted = args;
                    break
                case 'unshift':
                    inserted = args;
                    break
                case 'splice':
                    inserted = args.slice(2);
                    break
            }
            // 对添加的值调用数组监听方法
            if (inserted) {
                ob.observeArray(inserted);
            }
            // 广播变化 提示DOM更新及其他操作
            ob.dep.notify();
            return result
        });
    });

  完整的arrayMethods如上所述,解释大部分都写出来了,这也是vue通过对数组方法的劫持来达到变化监听的原理,对象的劫持下节再来分析。

 

  惯例,来一张图:

 

 

  快撒花!

转载于:https://www.cnblogs.com/QH-Jimmy/p/6878176.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值