浅析Vue初始化过程（基于Vue2.6）

import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App)
}).$mount('#app');

  "main": "dist/vue.runtime.common.js",
  "module": "dist/vue.runtime.esm.js"

{
  vue: resolve('src/platforms/web/entry-runtime-with-compiler')
}

//src/core/instance/index.js

import { initMixin } from './init'
import { stateMixin } from './state'
import { renderMixin } from './render'
import { eventsMixin } from './events'
import { lifecycleMixin } from './lifecycle'
import { warn } from '../util/index'

function Vue (options) {
  if (process.env.NODE_ENV !== 'production' &&
    !(this instanceof Vue)
  ) {
    warn('Vue is a constructor and should be called with the `new` keyword')
  }
  /**
   * 这是Vue进行初始化的真正开端
   */
  this._init(options)
}

/**
 * 同src/core/index.js中的代码类似，下面五个方法，同样也为Vue赋予了不同的能力
 */
/**
 * Vue.prototype._init = function ...
 **/
initMixin(Vue)
/**
 * Vue.prototype.'$data'
 * Vue.prototype.'$props'
 * Vue.prototype.$set
 * Vue.prototype.$delete
 * Vue.prototype.$watch
 */
stateMixin(Vue)
/**
 * Vue.prototype.$on
 * Vue.prototype.$once
 * Vue.prototype.$off
 * Vue.prototype.$emit
 */
eventsMixin(Vue)
/**
 * Vue.prototype._update
 * Vue.prototype.$forceUpdate
 * Vue.prototype.$destroy
 */
lifecycleMixin(Vue)
/**
 * Vue.prototype.$nextTick
 * Vue.prototype._render
 * Vue.prototype._o = markOnce
 * Vue.prototype._n = toNumber
 * Vue.prototype._s = toString
 * Vue.prototype._l = renderList
 * Vue.prototype._t = renderSlot
 * Vue.prototype._q = looseEqual
 * Vue.prototype._i = looseIndexOf
 * Vue.prototype._m = renderStatic
 * Vue.prototype._f = resolveFilter
 * Vue.prototype._k = checkKeyCodes
 * Vue.prototype._b = bindObjectProps
 * Vue.prototype._v = createTextVNode
 * Vue.prototype._e = createEmptyVNode
 * Vue.prototype._u = resolveScopedSlots
 * Vue.prototype._g = bindObjectListeners
 * Vue.prototype._d = bindDynamicKeys
 * Vue.prototype._p = prependModifier
 */
renderMixin(Vue)

export default Vue

//src/core/instance/init.js
Vue.prototype._init = function (options?: Object) {
    const vm: Component = this;
    // a uid
    vm._uid = uid++;

    let startTag, endTag;
    /* istanbul ignore if */
    if (process.env.NODE_ENV !== "production" && config.performance && mark) {
      startTag = `vue-perf-start:${vm._uid}`;
      endTag = `vue-perf-end:${vm._uid}`;
      mark(startTag);
    }

    // a flag to avoid this being observed
    vm._isVue = true;
    // merge options
    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
        options || {},
        vm
      );
    }
    /* istanbul ignore else */
    if (process.env.NODE_ENV !== "production") {
      initProxy(vm);
    } else {
      vm._renderProxy = vm;
    }
    // expose real self
    vm._self = vm;
    initLifecycle(vm);
    initEvents(vm);
    initRender(vm);
    callHook(vm, "beforeCreate");
    initInjections(vm); // resolve injections before data/props
    initState(vm);
    initProvide(vm); // resolve provide after data/props
    callHook(vm, "created");

    /* istanbul ignore if */
    if (process.env.NODE_ENV !== "production" && config.performance && mark) {
      vm._name = formatComponentName(vm, false);
      mark(endTag);
      measure(`vue ${vm._name} init`, startTag, endTag);
    }

    if (vm.$options.el) {
      /**
       * vm.$mount(vm.$options.el)，本质上，就是把vm控制的VNode，挂载到vm关联的DOM上面，这里的vm.$options.el就是这个目标DOM
       * 可能会觉得奇怪，前面src/core/index.js 和 src/core/instance/index.js两个文件中，并没有涉及到$mount方法，这个vm怎么突然钻出来了个$mount方法，
       * 实际上，在程序执行到src/core/index.js之前，会有一个入口文件，这个入口文件在src/platforms/web/entry-runtime-with-compiler.js
       * 其中src/platforms/web/entry-runtime-with-compiler.js里面会复用src/platforms/web/entry-runtime.js文件中的Vue.prototype.$mount方法，也就是说
       * Vue.prototype.$mount在程序开始之初就已经存在了
       */
      vm.$mount(vm.$options.el);
    }
  };
}

//src/platform/web/entry-runtime-with-compiler.js
const mount = Vue.prototype.$mount
Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  el = el && query(el)

  /* istanbul ignore if */
  if (el === document.body || el === document.documentElement) {
    process.env.NODE_ENV !== 'production' && warn(
      `Do not mount Vue to <html> or <body> - mount to normal elements instead.`
    )
    return this
  }
  
  const options = this.$options
  // resolve template/el and convert to render function
  if (!options.render) {
    let template = options.template
    if (template) {
      if (typeof template === 'string') {
        if (template.charAt(0) === '#') {
          template = idToTemplate(template)
          /* istanbul ignore if */
          if (process.env.NODE_ENV !== 'production' && !template) {
            warn(
              `Template element not found or is empty: ${options.template}`,
              this
            )
          }
        }
      } else if (template.nodeType) {
        template = template.innerHTML
      } else {
        if (process.env.NODE_ENV !== 'production') {
          warn('invalid template option:' + template, this)
        }
        return this
      }
    } else if (el) {
      template = getOuterHTML(el)
    }
    if (template) {
      /* istanbul ignore if */
      if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
        mark('compile')
      }

      const { render, staticRenderFns } = compileToFunctions(template, {
        outputSourceRange: process.env.NODE_ENV !== 'production',
        shouldDecodeNewlines,
        shouldDecodeNewlinesForHref,
        delimiters: options.delimiters,
        comments: options.comments
      }, this)
      options.render = render
      options.staticRenderFns = staticRenderFns

      /* istanbul ignore if */
      if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
        mark('compile end')
        measure(`vue ${this._name} compile`, 'compile', 'compile end')
      }
    }
  }
  return mount.call(this, el, hydrating)
}

//src/platform/web/runtime/index.js
Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  el = el && inBrowser ? query(el) : undefined
  return mountComponent(this, el, hydrating)
}