摘要：學習源碼時，我們首先需要看的是文件，該文件里配置了的依賴以及開發環境和生產環境的編譯的啟動腳本等其他信息。一個是完整版，一個是運行時。運行時用來創建實例渲染并處理虛擬等的代碼。基本上就是除去編譯器的其它一切。

學習vue源碼時，我們首先需要看的是package.json文件，該文件里配置了vue的依賴以及開發環境和生產環境的編譯的啟動腳本等其他信息。首先我們需要關注的是script。我們這里先看第一個dev腳本：

"dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev"

我們可以看到vue是采用了rollup編譯的腳本，然后對應的查看其配置文件config.js

const builds = {
...
// Runtime+compiler development build (Browser)
  "web-full-dev": {
    entry: resolve("web/entry-runtime-with-compiler.js"),
    dest: resolve("dist/vue.js"),
    format: "umd",
    env: "development",
    alias: { he: "./entity-decoder" },
    banner
  },
...
}

在該文件中我們可以找到web-full-dev的配置項，并且知道其編譯的文件為"web/entry-runtime-with-compiler.js"
那么我們就需要去找到該文件了。
我們可以發現entry-runtime-with-compiler.js的其中有一行代碼是：

import Vue from "./runtime/index"

然后繼續跟著代碼往上找，我們會發現還是嵌套了好幾層，最后在"/instance/index"中找到我們vue的定義：最終其路勁如下：

/src/platforms/web/web-runtime-with-compiler.js   
=> /src/platforms/web/runtime/index.js 
=> /src/core/index.js 
=> /src/core/instance/index.js 

最終我們在instance/index.js上找到了vue的廬山真面目，他的構造函數及其簡單：

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")
  }
  this._init(options)
}

我們可以發現它并沒有使用class的，只是一個普通的構造函數，通過 !(this instanceof Vue) 來強制使用new來構建。
之所以不采用class，個人理解是為了更好的把代碼拆分。原型上的方法只需要通過prototype來添加。如下

initMixin(Vue) // 這里主要注冊了_init
stateMixin(Vue) // $set,$delete,$watch
eventsMixin(Vue) // $on, $once, $off, $emit
lifecycleMixin(Vue) //  _update, $forceUpdate,$destroy
renderMixin(Vue) // $nextTick, _render

這邊都是基于在Vue上擴展方法，這樣就把代碼分離開發，方便維護。不需要全部寫到Vue函數內部。
然后我們往回走，我們可以看到/src/core/index.js 中

initGlobalAPI(Vue)
Object.defineProperty(Vue.prototype, "$isServer", {
  get: isServerRendering
})
Object.defineProperty(Vue.prototype, "$ssrContext", {
  get () {
    /* istanbul ignore next */
    return this.$vnode && this.$vnode.ssrContext
  }
})

Object.defineProperty(Vue, "FunctionalRenderContext", {
  value: FunctionalRenderContext
})

Vue.version = "__VERSION__"

該文件中主要就是注冊全局API，以供我們內部或外部使用
再往上/src/platforms/web/runtime/index.js，我們可以看到

// install platform specific utils
Vue.config.mustUseProp = mustUseProp
Vue.config.isReservedTag = isReservedTag
Vue.config.isReservedAttr = isReservedAttr
Vue.config.getTagNamespace = getTagNamespace
Vue.config.isUnknownElement = isUnknownElement

// install platform runtime directives & components
extend(Vue.options.directives, platformDirectives)
extend(Vue.options.components, platformComponents)

// install platform patch function 
Vue.prototype.__patch__ = inBrowser ? patch : noop // 用于把vNode顯示到dom上的方法，這邊要區分是瀏覽器環境還是weex環境

// public mount method
Vue.prototype.$mount = function () {
.....
} // 把dom掛在到頁面上

這邊就是注冊一些全局的工具，以及patch方法
那么再往上：src/platforms/web/web-runtime-with-compiler.js, 這個文件中主要就是重寫$mount

const mount = Vue.prototype.$mount
Vue.prototype.$mount = function (
){
...
}

那么為什么要重寫呢？原來在runtime里面的$mount方法是沒有編譯功能的，而最后一個重寫就是增加了編譯。
在vue腳手架我們會讓我們選擇哪個版本：如下圖

這就是2個版本的區別，是否包含編譯功能。一個是完整版，一個是運行時。
vue官方屬于解釋了：

完整版：同時包含編譯器和運行時的版本。
編譯器：用來將模板字符串編譯成為 JavaScript 渲染函數的代碼。
運行時：用來創建 Vue 實例、渲染并處理虛擬 DOM 等的代碼。基本上就是除去編譯器的其它一切。

如果你需要在客戶端編譯模板 (比如傳入一個字符串給 template 選項，或掛載到一個元素上并以其 DOM 內部的 HTML 作為模板)，就將需要加上編譯器，即完整版：
// 需要編譯器
new Vue({
  template: "
{{ hi }}
"
})

// 不需要編譯器
new Vue({
  render (h) {
    return h("div", this.hi)
  }
})

重寫$mount方法就是對template就行了編譯轉換為render方法
好了這邊就簡要的介紹了vue的入口。

您的點贊是我繼續努力的動力！