前言
記住框架的api是能讓我們熟練的使用框架，但優秀的施工人員和優秀的設計師，兩者還是有本質的區別。框架的api是如何實現的，如果是我們通過源碼調試找到的答案，相信一定會讓自己印象深刻。學習源碼的工程化編碼風格，理解用到的設計模式，算法等，想必對自己的成長大有裨益。
1 代碼結構
1.1 octotree插件
給大家安利一個github上看代碼的小插件，octotree，https://www.octotree.io。可以看到vue2版本的項目結構如下圖。
1.2 vue工程項目目錄
可以在控制台中運行tree命令，將目錄成樹狀打印。
├─.circleci
├─.github
├─benchmarks
├─dist ## 發布的目標目錄
├─examples ## vue相關的使用舉例
├─flow ## 針對flow的類型聲明
├─packages ## core核心代碼之外的其他一些功能包
├─scripts ## 項目構建腳本
├─src ## vue主要源碼
├─test ## 對於vue相關api單元測試以及使用舉例的端對端測試等
└─types ## TypeScript類型聲明
1.3 主要代碼目錄src
vue.js主要實現邏輯都在src資源目錄下，這里先對主要目錄進行一個簡單的描述。
├─compiler ## 編譯生成render函數相關
│ ├─codegen
│ ├─directives
│ └─parser
├─core ## vue.js核心代碼，實例化、響應式等
│ ├─components
│ ├─global-api
│ ├─instance
│ │ └─render-helpers
│ ├─observer
│ ├─util
│ └─vdom
│ ├─helpers
│ └─modules
├─platforms ## vue.js 對web端和weex端的分別支持
│ ├─web
│ │ ├─compiler
│ │ │ ├─directives
│ │ │ └─modules
│ │ ├─runtime
│ │ │ ├─components
│ │ │ ├─directives
│ │ │ └─modules
│ │ ├─server
│ │ │ ├─directives
│ │ │ └─modules
│ │ └─util
│ └─weex
│ ├─compiler
│ │ ├─directives
│ │ └─modules
│ │ └─recycle-list
│ ├─runtime
│ │ ├─components
│ │ ├─directives
│ │ ├─modules
│ │ └─recycle-list
│ └─util
├─server ## 服務端渲染ssr相關
│ ├─bundle-renderer
│ ├─optimizing-compiler
│ ├─template-renderer
│ └─webpack-plugin
├─sfc ## .vue單文件組件解析相關
└─shared ## web端和服務端渲染的公共代碼
compiler
這個目錄包含編譯相關的代碼，簡單來說就是將 vue 的 template 字符串模板解析成 ast 抽象語法樹，進而轉換為 render 渲染函數。
core
這個目錄包含vue的核心代碼，封裝了通用的全局組件、全局api、構造函數、響應式、工具方法，虛擬dom等。
platforms
這個目錄包含跨端實現的相關代碼，內部主要擴展了對weex的跨端開發的支持。里面的weex目錄是對weex端的適配，web目錄是對瀏覽器端的適配。
server
這個目錄包含服務端渲染ssr實現的相關代碼。
sfc
這個目錄包含對vue單文件組件解析的相關代碼，主要功能是將.vue 文件的內容解析成，符合單文件組件 (SFC) 規范的js描述對象。 https://vue-loader.vuejs.org/zh/spec.html vue-loader 文檔中也有提到。
shared
這個目錄包含一些公共配置項和方法。vue的web端和ssr服務端渲染都可以使用。
2 下載代碼並運行構建
這里主要先對 vue 的2版本的源碼進行分析，vue-next 3版本新特性會在后續文章中進行分析，如基於proxy實現的數據響應式，虛擬dom等。
2.1 源代碼下載
這里選擇2版本中最新的2.6.12版本進行下載。
2.2 打開項目安裝依賴
用 npm i 或者 yarn add all 進行依賴包的安裝。
2.3 package.json 的 scripts 配置中添加 --sourcemap
添加 --sourcemap，運行npm run dev 或者 yarn dev 生成帶編譯器版本的vue.js和其對應的.map 文件。我們在編寫demo調試的時候，引用dist/vue.js文件，通過vue.js.map，在瀏覽器中調試，就能關聯到對應的源碼文件。如圖所示。
3 編寫demo進行調試
在源碼項目中創建自己的demo目錄，寫一個簡單的示例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>init demo</title>
<script src="../dist/vue.js"></script>
</head>
<body>
<div id="app">{{title}}</div>
<script>
new Vue({
data: {
title: "vue調試"
}
}).$mount("#app");
</script>
</body>
</html>
斷點調試的時候，你就能看到 sidebar 中對應的源碼src目錄。
ctrl + p 可以搜索指定的源碼文件
