Vue源碼學習（一）——追根究底Vue

Harriet666 發布于2019-08-23 13:55 / 826人閱讀

摘要：其中執行命令是我們當前所關注的，對于項目的文件結構，我們需要去找到項目的啟動的入口文件，接下來我們去一步一步的找到分析命令是一個模塊打包器。

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

文件結構

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

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

從入口文件開始

首先，我們拿到一個文件后，我們應該養成習慣去查看項目根目錄下的package.json文件。文件的基本構成：項目名稱、版本、描述、執行命令、項目依賴等。
其中執行命令 script是我們當前所關注的，對于項目的文件結構，我們需要去找到項目的啟動的入口文件，接下來我們去一步一步的找到vue

分析命令

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

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

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

-w watch 監聽源文件是否有改動，有改動重新打包

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

--environment 傳遞給配置文件的環境變量，這里傳遞的是目標文件 TARGET

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

層層遞進

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

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

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

// builds 對象，屬性名對應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中對應的web/entry-runtime-with-compiler.js

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

// 引入了Vue的實例
import Vue from "./runtime/index"

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

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

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

// Vue的構造函數
function Vue (options) {
  //... 驗證環境
  this._init(options)
}

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

總結

綜上，小結一下追根過程

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源碼學習（二）——從宏觀看Vue

GPU云服務器云服務器 vue源碼 vue webrtc 源碼 vue3 學習筆記 (五)——vue3 Vue_Vue

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99792.html

javascript基礎-Vue數據綁定前奏對象屬性

摘要：關于有人說我用刪除這個屬性不就好了之后打印發現它還是一只哈士奇。如下的解釋如下操作符會從某個對象上移除指定屬性。 javascript-Object-Property ? javascript-對象的屬性的延伸學習 showImg(https://segmentfault.com/img/bVNH2S?w=640&h=640); 前言在學習vue數據綁定的較底層原理時，被setter...

zebrayoung 2019-08-20 16:33 評論0 收藏0
小白成長日記：寫個日歷

摘要：一周有天，返回的數，如果上月最后一天是星期二，看下的日歷是補了三天，我們得到的是，所以為此，之后就是填充最后一天，用處理一下再排序，上一個月的數據就得到了。每天進步一點點。寫個簡單的小日歷，依舊用vue，方便完成圖 showImg(https://segmentfault.com/img/bVZoWs?w=416&h=495); 思路本月的天數截取上月的天數截取下月天數今...

muzhuyu 2019-08-21 17:50 評論0 收藏0
前方來報，八月最新資訊--關于vue2&3的最佳文章推薦

摘要：哪吒別人的看法都是狗屁，你是誰只有你自己說了才算，這是爹教我的道理。哪吒去他個鳥命我命由我，不由天是魔是仙，我自己決定哪吒白白搭上一條人命，你傻不傻敖丙不傻誰和你做朋友太乙真人人是否能夠改變命運，我不曉得。我只曉得，不認命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出處查看github最新的Vue...

izhuhaodev 2019-08-26 10:44 評論0 收藏0
vue源碼學習（一）——從入口開始

摘要：學習源碼時，我們首先需要看的是文件，該文件里配置了的依賴以及開發環境和生產環境的編譯的啟動腳本等其他信息。一個是完整版，一個是運行時。運行時用來創建實例渲染并處理虛擬等的代碼?；旧暇褪浅ゾ幾g器的其它一切。學習vue源碼時，我們首先需要看的是package.json文件，該文件里配置了vue的依賴以及開發環境和生產環境的編譯的啟動腳本等其他信息。首先我們需要關注的是script。我...

ybak 2019-08-23 12:41 評論0 收藏0
vue 源碼學習（一）目錄結構和構建過程簡介

摘要：框架使用了作為類型檢查，來保證項目的可讀性和維護性。的主目錄下有的配置文件，還有目錄，指定了各種自定義類型。表示構建出來的文件遵循規范。 Flow vue框架使用了Flow作為類型檢查，來保證項目的可讀性和維護性。vue.js的主目錄下有Flow的配置.flowconfig文件，還有flow目錄，指定了各種自定義類型。在學習源碼前可以先看下Flow的語法官方文檔目錄結構 vue....

lavnFan 2019-08-23 14:36 評論0 收藏0