.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通过对数组方法的劫持来达到变化监听的原理，对象的劫持下节再来分析。

　　惯例，来一张图：

巴特西

.3-Vue源码之数据劫持（1）

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

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

快撒花！

最新文章

热门文章