摘要：源碼版本為原文地址和有必要了解這兩個(gè)概念的區(qū)別。點(diǎn)開目錄下的，發(fā)現(xiàn)確實(shí)是導(dǎo)出了一個(gè)構(gòu)造函數(shù)。再回過頭看，它給構(gòu)造函數(shù)擴(kuò)展了一些方法具體的邏輯后文看。

網(wǎng)上vue的源碼分析也蠻多的，不過很多都是1.0版本的并且大多都是在講數(shù)據(jù)的observe，索性自己看看源碼，雖然很難但是希望能學(xué)到點(diǎn)東西。

源碼版本為2.0.0

有必要了解這兩個(gè)概念的區(qū)別。我們寫vue程序的時(shí)候一般會(huì)給出template，但是仔細(xì)看過文檔的話一定知道vue支持render函數(shù)的寫法。runtime版本可直接執(zhí)行render函數(shù)寫法，假如是template寫法，需要先利用compiler解析模板至render函數(shù)，再執(zhí)行render函數(shù)渲染。

為了學(xué)習(xí)起來簡單，選擇先從runtime版本入手，事實(shí)上兩者相差的只是一個(gè)將模板字符串編譯成為 JavaScript 渲染函數(shù)的過程。

上面已經(jīng)說過從runtime版本入手，所以首要任務(wù)就是找到runtime版本的入口文件。

點(diǎn)開entries目錄下的web-runtime.js，發(fā)現(xiàn)確實(shí)是導(dǎo)出了一個(gè)Vue構(gòu)造函數(shù)。先寫一個(gè)例子跑起來試試

import Vue from "../src/entries/web-runtime.js"

window.app = new Vue({
    data: {
        msg: "hello",
    },
    render (h) {
      return h("p", this.msg)
    }
}).$mount("#root")

簡單的寫個(gè)webpack配置文件

"use strict"
const path = require("path")
const webpack = require("webpack")

module.exports = {
  watch: true,
  entry: {
    app: "./index.js"
  },
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "dist")
  },
  resolve: {
    extensions: [".js"],
    alias: {
        vue: path.resolve(__dirname, "../src/entries/web-runtime-with-compiler"),
        compiler: path.resolve(__dirname, "../src/compiler"),
        core: path.resolve(__dirname, "../src/core"),
        shared: path.resolve(__dirname, "../src/shared"),
        web: path.resolve(__dirname, "../src/platforms/web"),
        server: path.resolve(__dirname, "../src/server"),
        entries: path.resolve(__dirname, "../src/entries"),
        sfc: path.resolve(__dirname, "../src/sfc")
    }
  },
  module: {
    rules: [
        { test: /.js$/, loader: "babel-loader", include: [path.resolve(__dirname, "../src")] }
    ]
  }
}

注意配置一下extensions和alias，由于vue的源碼編寫時(shí)添加了類型檢測（flow.js），所以需要在babel中添加插件transform-flow-strip-types

webpack打包一下打開瀏覽器，hello映入眼簾。
至此，準(zhǔn)備工作結(jié)束

點(diǎn)開web-runtime.js可以發(fā)現(xiàn)Vue是從core/index.js導(dǎo)入的，代碼如下：

import config from "./config"
import { initGlobalAPI } from "./global-api/index"
import Vue from "./instance/index"

initGlobalAPI(Vue)

Object.defineProperty(Vue.prototype, "$isServer", {
  get: () => config._isServer
})

Vue.version = "2.0.0"

export default Vue

又發(fā)現(xiàn)Vue是從instance/index.js導(dǎo)入的，代碼如下：

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

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

export default Vue

到此時(shí)，我們算是真正的看到了Vue的構(gòu)造函數(shù)，構(gòu)造函數(shù)做了兩件事：

強(qiáng)制我們使用new關(guān)鍵字實(shí)例化

實(shí)例的初始化操作

定義了構(gòu)造函數(shù)之后，執(zhí)行了五個(gè)函數(shù)，這五個(gè)函數(shù)擴(kuò)展了Vue
的原型，也即定義了一些實(shí)例方法。

export function initMixin (Vue: Class) {
  Vue.prototype._init = function (options?: Object) {
    const vm: Component = this

...

再回過頭看initGlobalAPI(Vue)，它給Vue構(gòu)造函數(shù)擴(kuò)展了一些方法

export function initGlobalAPI (Vue: GlobalAPI) {
  // config
  const configDef = {}
  configDef.get = () => config
  if (process.env.NODE_ENV !== "production") {
    configDef.set = () => {
      util.warn(
        "Do not replace the Vue.config object, set individual fields instead."
      )
    }
  }
  Object.defineProperty(Vue, "config", configDef)
  Vue.util = util
  Vue.set = set
  Vue.delete = del
  Vue.nextTick = util.nextTick

  Vue.options = Object.create(null)
  config._assetTypes.forEach(type => {
    Vue.options[type + "s"] = Object.create(null)
  })

  util.extend(Vue.options.components, builtInComponents)

  initUse(Vue)
  initMixin(Vue)
  initExtend(Vue)
  initAssetRegisters(Vue)
}

export function initMixin (Vue: GlobalAPI) {
  Vue.mixin = function (mixin: Object) {
    Vue.options = mergeOptions(Vue.options, mixin)
  }
}

具體的邏輯后文看。