【Vue源碼探究一】當(dāng)我們引入Vue，我們引入了什么？

mengbo 發(fā)布于2019-08-20 16:30 / 3352人閱讀

摘要：源碼版本構(gòu)造器實(shí)例選項(xiàng)讓我們用一段展示一下這三個(gè)概念其中的構(gòu)造器實(shí)例實(shí)例名可以任意取，這里我們便于理解保持和文檔一致選項(xiàng)即為傳入構(gòu)造器里的配置選項(xiàng)。其實(shí)構(gòu)造器上也綁了不少好用的方法。

源碼版本：2.0.5

構(gòu)造器、實(shí)例、選項(xiàng)

讓我們用一段demo展示一下這三個(gè)概念：

//HTML

  {{ message }}

//JS
var vm = new Vue({
  el: "#app",
  data: {
    message: "Hello Vue!"
  }
})

其中：

Vue： Vue的構(gòu)造器

vm ：實(shí)例（實(shí)例名可以任意取，這里我們便于理解保持和vue文檔一致）

new Vue(options): 選項(xiàng)(options)即為傳入構(gòu)造器里的配置選項(xiàng)。（data, methods,computed,created...）

當(dāng)我們了解這三個(gè)概念，將有助于我們?nèi)ダ斫鈜ue的api文檔

Vue 的開放api

跳轉(zhuǎn)到vue的文檔

全局配置: 以 Vue.config.xx 的形式去訪問和修改

全局API：以Vue.xx 的形式去訪問和修改

選項(xiàng): 以 var vm = new Vue(options) 的形式將options傳入構(gòu)造器

實(shí)例屬性/方法：以vm.$xx的方式去訪問 (前綴$，為了避免用戶data/methods等解析后綁定的api 和默認(rèn)api沖突)

從api文檔中我們可以了解到，當(dāng)我們引入vue.js，我們僅僅引入了一個(gè)構(gòu)造函數(shù)（Vue）
引入了構(gòu)造函數(shù)后，我們有幾種使用方式

最常見的使用方式: var vm = new Vue(options)

將我們自定義的選項(xiàng)，傳入構(gòu)造器。當(dāng)new Vue(options)時(shí)，會(huì)自動(dòng)運(yùn)行vm._init方法

解析各種選項(xiàng)

調(diào)用beforeCreate 和created 上綁定的鉤子函數(shù)

將數(shù)據(jù)項(xiàng)(data,computed,props)和methods等綁到實(shí)例上

調(diào)用vm.$mount方法，來執(zhí)行模板渲染

返回一個(gè)實(shí)例對象 vm

實(shí)際上，我們使用vue.js來開發(fā)時(shí)，主要就是配置不同的options提供Vue構(gòu)造器解析,實(shí)現(xiàn)不同的業(yè)務(wù)功能。

通過更改Vue.config來進(jìn)行全局配置 在選項(xiàng)內(nèi)部可以使用 Vue 和 vm 來調(diào)用構(gòu)造器和實(shí)例上的方法 Vue源碼是怎么開放這些api的 主入口

src/core/index.js

import Vue from "./instance/index"
import { initGlobalAPI } from "./global-api/index"
import { isServerRendering } from "core/util/env"

initGlobalAPI(Vue)

Object.defineProperty(Vue.prototype, "$isServer", {
  get: isServerRendering
})

Vue.version = "__VERSION__"

export default Vue

Vue源碼的主入口主要做三件事
1.引用 ./instance/index 中暴露的Vue構(gòu)造器
2.調(diào)用initGlobalAPI方法，定義全局資源
3.暴露Vue

initGlobalAPI

src/core/global-api/index.js

//源碼有點(diǎn)長，我去掉了引用部分和一些注釋。
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)
  })

  Vue.options._base = Vue

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

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

initGlobal的代碼就是對Vue進(jìn)行各種方法和屬性定義

【Vue.config】各種全局配置項(xiàng)

【Vue.util】各種工具函數(shù)，還有一些兼容性的標(biāo)志位（哇，不用自己判斷瀏覽器了，Vue已經(jīng)判斷好了）

【Vue.set/delete】這個(gè)你文檔應(yīng)該見過

【Vue.nextTick】

【Vue.options】這個(gè)options和我們上面用來構(gòu)造實(shí)例的options不一樣。這個(gè)是Vue默認(rèn)提供的資源（組件指令過濾器）。

【Vue.use】通過initUse方法定義

【Vue.mixin】通過initMixin方法定義

【Vue.extend】通過initExtend方法定義

這些定義的全局api可好玩了，平常我們多是用實(shí)例上的方法。其實(shí)構(gòu)造器上也綁了不少好用的方法。
有興趣的同學(xué)，可以用下方代碼去探究一下

在你的vue項(xiàng)目里，谷歌命令行鍵入
Object.getOwnPropertyNames(Vue)  //可以看定義在對象上的所有屬性名/方法名
Vue.config
Vue.util
Vue.set.toString()  //我們平常在控制臺(tái)上是看不了一個(gè)函數(shù)到底源碼怎么樣的，用toString()就可以啦

Vue構(gòu)造器的定義

src/core/instance/index.js

//構(gòu)造函數(shù)，當(dāng)new Vue(options) 會(huì)自動(dòng)執(zhí)行這個(gè)函數(shù)
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)

這里就不一個(gè)一個(gè)函數(shù)展開了
構(gòu)造函數(shù)里其實(shí)就一句話，this._init(options)

initMixin之類的方法，定義了實(shí)例上的方法，下面給出一個(gè)探索地圖，以供探究源碼

我們可以看到以 "_"為開頭的方法，多半是Vue內(nèi)部使用，但不公開的api。
以“$” 為開頭的方法，是文檔中公開給用戶使用的默認(rèn)api

至此，我們對Vue的結(jié)構(gòu)有了個(gè)初步的了解，以及相關(guān)api的原始出處有了初步了解。

在學(xué)習(xí)的過程中，參考了兩位大牛的文章，收益良多
囧克斯 Vue.js源碼學(xué)習(xí)筆記
王鶴 Vue.js 2.0源碼解析之前端渲染篇