.2-Vue源码起步（2）

接着第一节开始继续吧（GoGoGo）

　　上一节把mergeOptions函数弄完了，最后返回一个options赋给了vm.$options。

　　这一节继续跑代码：

    function initMixin(Vue) {
        Vue.prototype._init = function(options) {
            //..上一节
            vm.$options = mergeOptions(
                resolveConstructorOptions(vm.constructor),
                options || {},
                vm
            );
            // 从这里开始跑
            /* istanbul ignore else */
            {
                initProxy(vm);
            }
            // 疯狂保存自身引用
            vm._self = vm;
            // 初始化跑起来
            initLifecycle(vm);
            initEvents(vm);
            initRender(vm);
            callHook(vm, 'beforeCreate');
            initInjections(vm);
            initState(vm);
            initProvide(vm);
            callHook(vm, 'created');
            /* istanbul ignore if */
            if ("development" !== 'production' && config.performance && mark) {
                vm._name = formatComponentName(vm, false);
                mark(endTag);
                measure(((vm._name) + " init"), startTag, endTag);
            }
            // 判断是否有el属性 进行挂载
            if (vm.$options.el) {
                vm.$mount(vm.$options.el);
            }
        };
    }

　　剩余的代码主要有3件事：initProxy()、各种初始化函数、挂载vue。

　　

　　在讲initProxy()之前，有必要先讲讲这个奇怪的注释：/* istanbul ignore else */。

　　这个注释代码段出现的频率和"development" !== 'production'不相上下，一开始我是无视的，但是慢慢的觉得很奇怪，这个注释可能并不简单。

　　首先百度了一下istanbul，是个国家，天气不错，各种旅游攻略。发现不对劲，果断在前面加个js关键字，发现了这其实是一个代码覆盖率工具，即是否所有代码都测试到了。

　　这个工具我就不介绍了，总之这行注释的意思就是，下一个代码段中的else语句不计入代码覆盖率计算。

　　

initProxy()

　　开始跑initProxy()函数，只接受一个参数，即当前vue实例。

    // Line-1620
    initProxy = function initProxy(vm) {
        // 是否支持es6的代理
        if (hasProxy) {
            // 根据参数判断调用哪一个代理
            var options = vm.$options;
            var handlers = options.render && options.render._withStripped ?
                getHandler :
                hasHandler;
            vm._renderProxy = new Proxy(vm, handlers);
        }
        // 不支持
        else {
            vm._renderProxy = vm;
        }
    };

　　首先会判断是否支持Proxy，这是ES6新出的语法代理，详情可见阮一峰的书:http://es6.ruanyifeng.com/#docs/proxy。

　　若支持，再进行传进来的vm进行参数判断，选择代理。

　　当前vm只有三个参数（其实不止，先不管了）：$options、_isVue、_uid，所以很明显，调用的是hasHandelr这个代理。

    // Line-1562
    var initProxy; {
        //..一些字符匹配集
        if (hasProxy) {
            var isBuiltInModifier = makeMap('stop,prevent,self,ctrl,shift,alt,meta');
            config.keyCodes = new Proxy(config.keyCodes, {
                set: function set(target, key, value) {
                    // ...定义事件别名
                }
            });
        }
        var hasHandler = {
            has: function has(target, key) {
                var has = key in target;
                // 判断key是否跟内置全局变量冲突
                var isAllowed = allowedGlobals(key) || key.charAt(0) === '_';
                // 不存在或者非法
                if (!has && !isAllowed) {
                    warnNonPresent(target, key);
                }
                return has || !isAllowed
            }
        };
        var getHandler = {
            //..不管
        };
        initProxy = function initProxy(vm) {
            // 是否支持es6的Proxy代理
            if (hasProxy) {
                // 根据参数判断调用哪一个代理函数
                var options = vm.$options;
                var handlers = options.render && options.render._withStripped ?
                    getHandler :
                    hasHandler;
                vm._renderProxy = new Proxy(vm, handlers);
            }
            // 不支持
            else {
                vm._renderProxy = vm;
            }
        };
    }

　　Proxy这个说实话我看不太懂，属于那种看看就好的语法，可能境界没达到吧，但不怎么影响我理解这段代码，有错欢迎指出来。

　　initProxy(vm)这个函数主要就做了一个方法劫持，相当于ng里面的拦截器，在vm._renderProxy中，每一个键都会进行合法性检测，如果与内置全局对象冲突，就会调用warnNonPresent()报警。

　　

　　如果不支持，就算了。

初始化家族

　　这一部分包含8个初始化，个个都是怪物，然而由于案例比较简单，大部门都会直接跳过。

　　1、initLifecycle

    // Line-2259
    function initLifecycle(vm) {
        var options = vm.$options;
        // 没有parent 跳
        var parent = options.parent;
        if (parent && !options.abstract) {
            while (parent.$options.abstract && parent.$parent) {
                parent = parent.$parent;
            }
            parent.$children.push(vm);
        }
        vm.$parent = parent;
        vm.$root = parent ? parent.$root : vm;
        vm.$children = [];
        vm.$refs = {};
        vm._watcher = null;
        vm._inactive = null;
        vm._directInactive = false;
        vm._isMounted = false;
        vm._isDestroyed = false;
        vm._isBeingDestroyed = false;
    }

　　这个函数主要对vm.$options.parent属性进行处理，很遗憾，我没有。

　　目前，vm的属性是5个，多了_self、_renderProxy，跑完这个函数，又多了一串，暂时不管。

　　

　　2、initEvents

    // Line-2074
    function initEvents(vm) {
        vm._events = Object.create(null);
        vm._hasHookEvent = false;
        // 又搞parent 没有
        var listeners = vm.$options._parentListeners;
        if (listeners) {
            updateComponentListeners(vm, listeners);
        }
    }

　　多了2个事件相关属性。

 

　　3、initRender

    // Line-3824
    function initRender(vm) {
        vm._vnode = null; // the root of the child tree
        vm._staticTrees = null;
        var parentVnode = vm.$vnode = vm.$options._parentVnode; // the placeholder node in parent tree
        var renderContext = parentVnode && parentVnode.context;
        // 由于传了2个undefined 返回一个空对象
        vm.$slots = resolveSlots(vm.$options._renderChildren, renderContext);
        vm.$scopedSlots = emptyObject;
        // 2个属性方法 之后再看
        vm._c = function(a, b, c, d) {
            return createElement(vm, a, b, c, d, false);
        };
        vm.$createElement = function(a, b, c, d) {
            return createElement(vm, a, b, c, d, true);
        };
    }

　　4、callHook

    // Line-2532
    function callHook(vm, hook) {
        // hook => beforeCreate
        // 没有这个钩子函数
        var handlers = vm.$options[hook];
        if (handlers) {
            for (var i = 0, j = handlers.length; i < j; i++) {
                try {
                    handlers[i].call(vm);
                } catch (e) {
                    handleError(e, vm, (hook + " hook"));
                }
            }
        }
        // 这个也没有
        if (vm._hasHookEvent) {
            vm.$emit('hook:' + hook);
        }
    }

　　钩子函数都没有，这个初始化跳过。

 

　　5、initInjections

    // Line-3218
    function initInjections(vm) {
        // 由于没有inject属性 跳过
        var result = resolveInject(vm.$options.inject, vm);
        if (result) {
            Object.keys(result).forEach(function(key) {
                /* istanbul ignore else */
                {
                    defineReactive$$1(vm, key, result[key], function() {
                        warn(
                            "Avoid mutating an injected value directly since the changes will be " +
                            "overwritten whenever the provided component re-renders. " +
                            "injection being mutated: "" + key + """,
                            vm
                        );
                    });
                }
            });
        }
    }

　　

　　6、initState

    // Line-2947
    function initState(vm) {
        vm._watchers = [];
        var opts = vm.$options;
        // 针对参数做初始化
        if (opts.props) {
            initProps(vm, opts.props);
        }
        if (opts.methods) {
            initMethods(vm, opts.methods);
        }
        // 目前只有data参数
        if (opts.data) {
            initData(vm);
        } else {
            observe(vm._data = {}, true /* asRootData */ );
        }
        if (opts.computed) {
            initComputed(vm, opts.computed);
        }
        if (opts.watch) {
            initWatch(vm, opts.watch);
        }
    }

　　这个地方开始对传进来的参数做初始化挂载，由于只传了el和data，而el参数在最后面才处理，所以目前只会执行initData函数。

　　来看看initData函数运作，这可能是最关键的部分了。

    // Line-3011
    function initData(vm) {
        // 取出data参数 这里的data不是传进来的对data象 而是一个函数
        var data = vm.$options.data;
        // 判断类型 格式化data
        data = vm._data = typeof data === 'function' ?
            getData(data, vm) :
            data || {};
        // data属性必须返回对象
        if (!isPlainObject(data)) {
            data = {};
            "development" !== 'production' && warn(
                'data functions should return an object:
' +
                'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function',
                vm
            );
        }
        // 代理data属性
        var keys = Object.keys(data);
        var props = vm.$options.props;
        var i = keys.length;
        while (i--) {
            if (props && hasOwn(props, keys[i])) {
                "development" !== 'production' && warn(
                    "The data property "" + (keys[i]) + "" is already declared as a prop. " +
                    "Use prop default value instead.",
                    vm
                );
            }
            // 禁止以$,_开头
            else if (!isReserved(keys[i])) {
                proxy(vm, "_data", keys[i]);
            }
        }
        // 双绑入口
        observe(data, true /* asRootData */ );
    }

　　整理一下，data属性初始化主要有格式化、代理、双绑三个部分。

　　首先来看看格式化，在第一节中的mergeOptions函数最后面，options中的data属性变成了一个叫mergedInstanceDataFn的函数，因此三元表示式返回的是getData(data, vm)。

　　getData函数比较简单， 所以把两个弄一起得了。

    // Line-3043
    function getData(data, vm) {
        try {
            // 尝试执行data函数
            return data.call(vm)
        } catch (e) {
            handleError(e, vm, "data()");
            return {}
        }
    }

    // Line-1132
    // 传进来的parentVal、childVal分别为undefined、{message:'Hello Vue!} 
    function mergedInstanceDataFn() {
        // 这个是对象
        var instanceData = typeof childVal === 'function' ?
            childVal.call(vm) :
            childVal;
        // 这个是undefined
        var defaultData = typeof parentVal === 'function' ?
            parentVal.call(vm) :
            undefined;
        // 合并数据 由于第二个参数为undefined 直接返回原data对象
        if (instanceData) {
            return mergeData(instanceData, defaultData)
        } else {
            return defaultData
        }
    }

　　在getData函数中，会尝试以vm为上下文执行data函数，根据参数执行mergedInstanceDataFn函数后，最后返回的仍然是传进来的data对象。

　　

　　再来看代理部分，首先会遍历data对象的键，判断是否不以$,_开头，然后进行代理操作。尝试了一下，如果使用$message,_message会报错，后面再看为什么。

　　这部分的关键在于proxy这个函数，ES6自带的是Proxy，不是一个东西，是一个正常的函数。

    // Line-2930
    var sharedPropertyDefinition = {
        enumerable: true,
        configurable: true,
        get: noop,
        set: noop
    };

    // Line-2937
    // target => vm | sourceKey => _data | key => 'message'
    function proxy(target, sourceKey, key) {
        sharedPropertyDefinition.get = function proxyGetter() {
            return this[sourceKey][key]
        };
        sharedPropertyDefinition.set = function proxySetter(val) {
            this[sourceKey][key] = val;
        };
        Object.defineProperty(target, key, sharedPropertyDefinition);
    }

　　简单来讲，这个方法就是给vm添加了一个_data属性，值是data。

　　因为只传了一个message，所以 _data属性是这样的：

　　

　　第三部分属于比较核心的部分，即数据监测，双绑的一部分，下次写吧！

　　用一张图片梳理一下第二节吧。