Vue源碼學(xué)習(xí)（一）——追根究底Vue

Harriet666 發(fā)布于2019-08-23 13:55 / 850人閱讀

摘要：其中執(zhí)行命令是我們當(dāng)前所關(guān)注的，對于項(xiàng)目的文件結(jié)構(gòu)，我們需要去找到項(xiàng)目的啟動的入口文件，接下來我們?nèi)ヒ徊揭徊降恼业椒治雒钍且粋€模塊打包器。

打算開始學(xué)習(xí)vue的源碼開始，我開始 serach 關(guān)鍵詞：vue 源碼，可是發(fā)現(xiàn)很多都不是我想要看到的東西，所以打算記錄下來，學(xué)習(xí)的記錄和日后分享。我在想這個文章的名字時，手把手系列？十分鐘系列？小白到大佬系列？都不是，只是單純的學(xué)習(xí)筆記

文件結(jié)構(gòu)

當(dāng)我從 github 上 clone Vue 源碼后，我看到很多熟悉的文件夾命名，以及配置文件，但對于我個小菜雞，我還是想整體了解一下每個文件夾的內(nèi)容，然后再去深挖~
有些我自己現(xiàn)在還不是很懂的后續(xù)再補(bǔ)上~

├─benchmarks
├─dist   打包后文件目錄
├─examples 部分示例
├─flow  聲明靜態(tài)類型
├─packages  vue可被分成的其他npm包
│  ├─vue-server-renderer
│  ├─vue-template-compiler
│  ├─weex-template-compiler
│  └─weex-vue-framework
├─scripts 
├─src   主要源碼
│  ├─compiler
│  ├─core   核心代碼
│  ├─platforms  平臺相關(guān)內(nèi)容
│  ├─server 服務(wù)端渲染相關(guān)
│  ├─sfc
│  └─shared
├─test  測試用例
└─types 類型定義
    └─test

從入口文件開始

首先，我們拿到一個文件后，我們應(yīng)該養(yǎng)成習(xí)慣去查看項(xiàng)目根目錄下的package.json文件。文件的基本構(gòu)成：項(xiàng)目名稱、版本、描述、執(zhí)行命令、項(xiàng)目依賴等。
其中執(zhí)行命令 script是我們當(dāng)前所關(guān)注的，對于項(xiàng)目的文件結(jié)構(gòu)，我們需要去找到項(xiàng)目的啟動的入口文件，接下來我們?nèi)ヒ徊揭徊降恼业?strong>vue

分析命令

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

rollup是一個 JavaScript 模塊打包器。感興趣的話可以去具體的研究，這里我們不做具體的探究。那我們知道這里它存在的作用就是對js進(jìn)行打包處理。

我們來具體看一下這個命令的含義：

-w watch 監(jiān)聽源文件是否有改動，有改動重新打包

-c config 使用配置文件 scripts/config.js

--environment 傳遞給配置文件的環(huán)境變量，這里傳遞的是目標(biāo)文件 TARGET

根據(jù)以上，我們可以得知，該命令為使用 scripts/config.js中的配置文件去打包 TARGET:web-full-dev,我們想知道這個targt 具體指的是什么，我們需要去看一下config配置文件

層層遞進(jìn)

1.scriptsconfig.js 中我們可以找到，最下方為該文件的js執(zhí)行部分，其中先去判斷了我們所傳入的Target，然后調(diào)用了genConfig

//  判斷傳入的環(huán)境變量
if (process.env.TARGET) {
  module.exports = genConfig(process.env.TARGET)
}

2.我們繼續(xù)往上看，genconfig根據(jù)函數(shù)名我們可以得知，為獲取config這樣的一個功能，Target為傳入的name,文件的上方定義了 builds,一個屬性對應(yīng)一個Target*，這樣我們可以找到我們專注的web-full-dev

// builds 對象，屬性名對應(yīng)Target
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
  }

  // ...
}

// ...

// 這里傳入的name 就是Target
function genConfig (name) {
  const opts = builds[name]
  // ... other config
}

從上可以看出，我們需要的是入口文件即entry中對應(yīng)的web/entry-runtime-with-compiler.js

3.打開entry-runtime-with-compiler.js, 在文件上方，我們可以看到這個文件中import Vue,我們所需要的是去追根到Vue的起始，所以就找到了上一層runtime/index

// 引入了Vue的實(shí)例
import Vue from "./runtime/index"

4.打開上一步我們找到的src/platforms/web/runtime/index.js 文件，第一行就引入了import Vue from "core/index"
沒關(guān)系我們繼續(xù)，酒香不怕巷子深
5.srccoreindex.js

// 又一次是引入了Vue的實(shí)例
import Vue from "./instance/index"

6.src/core/instanceindex.js，驚喜~ ,在這里我們找到了Vue的構(gòu)造函數(shù)，構(gòu)造函數(shù)中僅調(diào)用了init方法，_init方法哪里來的呢，當(dāng)然是文件下方在Vue原型上綁定的方法，接下來我們會以一個的去

// Vue的構(gòu)造函數(shù)
function Vue (options) {
  //... 驗(yàn)證環(huán)境
  this._init(options)
}

// 在Vue原型上綁定實(shí)例方法
initMixin(Vue)  // init
stateMixin(Vue)  // $set $delete $watch
eventsMixin(Vue)  // $on $once $off $emit
lifecycleMixin(Vue)  // _update $forceUpdate $destroy
renderMixin(Vue)  // $nextTick _render

總結(jié)

綜上，小結(jié)一下追根過程

package.json
--> scripts/config.js
--> web/entry-runtime-with-compiler.js
--> src/platforms/web/runtime/index.js
--> src/core/index.js
--> src/core/instance/index.js

下一篇：Vue源碼學(xué)習(xí)（二）——從宏觀看Vue