vue原理分析（六）--研究new Vue()

今天我们来分析使用new Vue()

之前研究时，只是说是在创建一个实例。并没有深入进行研究

在vue的源码中找下Vue的构造函数

复制代码

function Vue(options) {

    if (!(this instanceof Vue)) {

        warn$2('Vue is a constructor and should be called with the `new` keyword');

    }

    this._init(options);

}

if判断语句是指，需要用new 关键字来构造实例对象

后面就是 this._init(options) 调用了_init方法，参数是options

找到_init(options)方法

接下来我们逐句分析

复制代码

Vue.prototype._init = function (options) {

        // 1. 定义变量对象vm  后续需要给vm添加属性，再将vm作为参数调用一系列函数

        const vm = this;

        // a uid

        // 2. vm添加_uid属性, 自增

        vm._uid = uid++;

        let startTag, endTag;

        // 3. istanbul ignore if 是一个注释指令，用于在代码覆盖率工具 Istanbul 中标记某段代码，以便在生成代码覆盖率报告时忽略该段代码的覆盖率计算

        // 从英文名猜下是关于performance性能的，暂时先不管它。后续有遇到再继续研究

        /* istanbul ignore if */

        if (config.performance && mark) {

            startTag = `vue-perf-start:${vm._uid}`;

            endTag = `vue-perf-end:${vm._uid}`;

            mark(startTag);

        }

        // a flag to mark this as a Vue instance without having to do instanceof

        // check

        // 4. vm添加_isVue属性

        vm._isVue = true;

        // avoid instances from being observed

        // 5. vm添加__v_skip属性

        vm.__v_skip = true;

        // effect scope

        // 6. vm添加_scope属性 _scope是new EffectScope()

        vm._scope = new EffectScope(true /* detached */);

        // #13134 edge case where a child component is manually created during the

        // render of a parent component

        // 7. vm._scope设置属性

        vm._scope.parent = undefined;

        vm._scope._vm = true;

        // merge options

        // 8. 核心代码，对于入参options进行判断

        // initInternalComponent(vm, options)  这个我们暂时还没有遇到过，先跳过

        // 或者mergeOptions()     一会儿研究

        if (options && options._isComponent) {

            // optimize internal component instantiation

            // since dynamic options merging is pretty slow, and none of the

            // internal component options needs special treatment.

            initInternalComponent(vm, options);

        }

        else {

            vm.$options = mergeOptions(resolveConstructorOptions(vm.constructor), options || {}, vm);

        }

        /* istanbul ignore else */

        // 9. initProxy(vm)  一会儿研究

        {

            initProxy(vm);

        }

        // expose real self

        // 10. vm添加_self属性

        vm._self = vm;

        // 11. 调用一堆方法 一会儿研究

        initLifecycle(vm);

        initEvents(vm);

        initRender(vm);

        callHook$1(vm, 'beforeCreate', undefined, false /* setContext */);

        initInjections(vm); // resolve injections before data/props

        initState(vm);

        initProvide(vm); // resolve provide after data/props

        callHook$1(vm, 'created');

        /* istanbul ignore if */

        // 12. 感觉又是跟性能有关的内容

        if (config.performance && mark) {

            vm._name = formatComponentName(vm, false);

            mark(endTag);

            measure(`vue ${vm._name} init`, startTag, endTag);

        }

        // 13.如果vm.$options有el参数，后续执行了$mount挂载

        if (vm.$options.el) {

            vm.$mount(vm.$options.el);

        }

    };