（1）从Vue的入口文件开始

Vue的两个版本

• Runtime Only

  这个版本Vue在Webpack编译的时候就将template模板预编译成了render函数，所以这个版本既减小了打包的大小，又提高了运行时的效率

• Runtime + Compiler

  这个版本没有对代码进行预编译，所以template会在APP运行的时候来编译，在编译的过程中对性能会有一定的损耗。

如果是在代码里有动态传入template，那么就必须使用带编译器版本的Vue

new Vue({
  template: '<div>{{ hi }}</div>'
})

入口开始

src/platforms/web/entry-runtime-with-compiler.js

在这里对Vue对象加上了相应运行环境的方法，主要是以下几个比较重要的

• virtualDom的patch方法

import { patch } from './patch'
// install platform patch function
Vue.prototype.__patch__ = inBrowser ? patch : noop

• mount

vue先在src/platforms/web/runtime/index.js中将mount函数进行重新赋值。

第一个$mount函数的作用是真正的挂载Vue组件到DOM上的方法

第二个$mount函数是将Vue的template编译成了render函数

-------------------->src/platforms/web/runtime/index.js 

/*组件挂载方法*/
Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  /*获取DOM实例对象*/
  el = el && inBrowser ? query(el) : undefined
  /*挂载组件*/
  return mountComponent(this, el, hydrating)
}


-------------->src/platforms/web/entry-runtime-with-compiler.js

/*把原本不带编译的$mount方法保存下来，在最后会调用。*/
const mount = Vue.prototype.$mount

/*挂载组件，带模板编译*/
Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean       //服务端渲染的参数
): Component {
  el = el && query(el)
  
  const options = this.$options
  // resolve template/el and convert to render function
  /*处理模板templete，编译成render函数，render不存在的时候才会编译template，否则优先使用render*/
  if (!options.render) {
    ...
    ...
    ...
    /*将template编译成render函数，这里会有render以及staticRenderFns两个返回，这是vue的编译时优化，static静态不需要在VNode更新时进行patch，优化性能*/
    if (template) {
      const { render, staticRenderFns } = compileToFunctions(template, {
        shouldDecodeNewlines,
        delimiters: options.delimiters
      }, this)
      options.render = render
      options.staticRenderFns = staticRenderFns
    }
  }
  /*调用const mount = Vue.prototype.$mount保存下来的不带编译的mount*/
  return mount.call(this, el, hydrating)
}

从上面一直看到Vue，那么这个Vue对象是哪里来的呢？多跳几个import语句就能看到
它其实在core/instance/index中定义的

function Vue (options) {
  /*初始化*/
  this._init(options)
}

initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)

export default Vue

可以看到非常的优雅（ps：看起来很少的意思，只有几行。在我们做new Vue()这个操作的时候，就是调用它的_init函数这个过程。下面几个函数的调用，是对Vue.prototype上挂上各种方法，_init方法也是在这里挂上的。接下来就要开始看这些方法到底给Vue挂上了什么啦!!!