摘要：學(xué)習(xí)源碼時(shí)，我們首先需要看的是文件，該文件里配置了的依賴以及開發(fā)環(huán)境和生產(chǎn)環(huán)境的編譯的啟動(dòng)腳本等其他信息。一個(gè)是完整版，一個(gè)是運(yùn)行時(shí)。運(yùn)行時(shí)用來創(chuàng)建實(shí)例渲染并處理虛擬等的代碼。基本上就是除去編譯器的其它一切。

學(xué)習(xí)vue源碼時(shí)，我們首先需要看的是package.json文件，該文件里配置了vue的依賴以及開發(fā)環(huán)境和生產(chǎn)環(huán)境的編譯的啟動(dòng)腳本等其他信息。首先我們需要關(guān)注的是script。我們這里先看第一個(gè)dev腳本：

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

我們可以看到vue是采用了rollup編譯的腳本，然后對(duì)應(yīng)的查看其配置文件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的配置項(xiàng)，并且知道其編譯的文件為"web/entry-runtime-with-compiler.js"
那么我們就需要去找到該文件了。
我們可以發(fā)現(xiàn)entry-runtime-with-compiler.js的其中有一行代碼是：

import Vue from "./runtime/index"

然后繼續(xù)跟著代碼往上找，我們會(huì)發(fā)現(xiàn)還是嵌套了好幾層，最后在"/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 

最終我們?cè)趇nstance/index.js上找到了vue的廬山真面目，他的構(gòu)造函數(shù)及其簡(jiǎn)單：

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)
}

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

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

這邊都是基于在Vue上擴(kuò)展方法，這樣就把代碼分離開發(fā)，方便維護(hù)。不需要全部寫到Vue函數(shù)內(nèi)部。
然后我們往回走，我們可以看到/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__"

該文件中主要就是注冊(cè)全局API，以供我們內(nèi)部或外部使用
再往上/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上的方法，這邊要區(qū)分是瀏覽器環(huán)境還是weex環(huán)境

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

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

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

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

這就是2個(gè)版本的區(qū)別，是否包含編譯功能。一個(gè)是完整版，一個(gè)是運(yùn)行時(shí)。
vue官方屬于解釋了：

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

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

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

重寫$mount方法就是對(duì)template就行了編譯轉(zhuǎn)換為render方法
好了這邊就簡(jiǎn)要的介紹了vue的入口。

您的點(diǎn)贊是我繼續(xù)努力的動(dòng)力！