Vue原始碼分析

在開始原始碼分析工作之前，我們在當前篇章做好相應的準備工作，以便更好地展開分析。

將原始碼fork到自己的github倉庫中

git clone 自己的github/vue 位址

dist 打包之後的結果 examples 示例 src ├─compiler 編譯相關 ├─core vue 核心庫 ├─components 定義vue中自帶的keep-alive元件 ├─global-api 定義vue中的靜態方法 ├─instance 建立vue例項 ├─observer 響應式機制 ├─util 公共成員 ├─vdom 虛擬dom ├─platforms 平台相關** ├─server ssr，服務端渲染 ├─sfc .vue 檔案編譯為 js 物件 └─shared 公共的**

1. 打包

vue 中使用的打包工具是rollup

安裝依賴：yarn設定sourcemap

package.json 檔案中的 dev 指令碼中新增引數 --sourcemap

"dev": "rollup -w -c scripts/config.js --sourcemap --environment target:web-full-dev",

-w: watch 當原始碼發生變化的時候立即執行打包 -c: 指向配置檔案 --environment target: 設定環境變數target

執行 dev :yarn dev

2. 除錯

開啟檔案examples/grid/index.html

修改vue引入位置

瀏覽器中執行當前html

debuggerexamples/grid/grid.jslinevar demo = new vue({

命令

通過yarn build可以將不同版本的vue都打包出來

相關文件

官方文件

dist/readme.md

umdcommonjs

es module

fullvue.js

vue.common.js

vue.esm.js

runtime-onlyvue.runtime.js

vue.runtime.common.js

vue.runtime.esm.js

full (production)vue.min.js

runtime-only (production)vue.runtime.min.js

解釋

檢視

檢視vue webpack配置檔案：vue inspect > output.js

基於 vue-cli 建立的專案預設使用的是vue.runtime.esm.js

首先找到package.json 中的dev指令碼"dev": "rollup -w -c scripts/config.js --sourcemap --environment target:web-full-dev",

明確引數

-c scripts/config.js 指向當前打包配置檔案

target為當前打包的vue版本

通過scripts/config.js跟蹤入口檔案【rollup相關配置文件】

結果：src/platforms/web/entry-runtime-with-compiler.js

示例： $mount呼叫處在**

除錯測試**：找到入口檔案處打斷點，斷點進入後檢視呼叫堆疊：vue.$mount是在vue._init中呼叫的， vue._init()是在src/core/instance/index.js中呼叫的

恭喜你，已經完成了我們整個程序的準備工作，現在開始我們開始真正的原始碼之旅吧~

Vue原始碼分析

Vue原始碼分析（流程分析）

vue原始碼分析1

Vue原始碼主體分析

Vue原始碼分析

Vue原始碼分析（流程分析）

vue原始碼分析1

Vue原始碼主體分析

相關推薦