vue源碼閱讀一：Vue 的初始化

前言

使用 vue 有段時間了，對 vue 的認識還停留在使用上，即便代碼寫的很 6 ，也只過是個 API 工程師，這樣但是不行的呀。 遂心生看源碼的念頭，一是能夠學習大神們的代碼、編程技巧，二來也能夠看看 vue 的實現原理。有點滴收穫也是好的。

一些準備

我看的版本是 2.6.10，是目前 (19.11) 線上的最新的版本了。 首先咱們先看下 vue 源碼核心的代碼結構。

src
├── compiler        # 編譯相關
├── core            # 核心代碼
├── platforms       # 不一樣平臺的支持
├── server          # 服務端渲染
├── sfc             # .vue 文件解析
├── shared          # 共享代碼
複製代碼

• compiler：主要是將 template 編譯成 render 函數。包括將 template 編譯成 ast 語法樹、ast語法樹的優化、生成 render 函數。
• core：vue 的核心代碼，包括全局 API 的封裝、vue 的實例化、虛擬 DOM 等。
• platforms：能夠跨平臺，能夠配合 weex，讓代碼運行在 native 端。
• server：服務端渲染相關。
• sfc：把 .vue 類型的文件，解析成 js 對象。
• shared：客戶端和服務端公用的一些方法。

初始化

vue 在構建時，運行的是 npm run build 指令，實際上執行的是node scripts/build.js。

"build": "node scripts/build.js",
複製代碼

在scripts/build.js文件中：

// 讀取配置文件
let builds = require("./config").getAllBuilds()
複製代碼

而在配置文件scripts/config.js中，主要是像下面這樣的配置，有不少。

'web-runtime-cjs-dev': {
  entry: resolve('web/entry-runtime.js'), // 構建文件的入口
  dest: resolve('dist/vue.runtime.common.dev.js'), // 構建文件的出口
  format: 'cjs', // 構建出來的文件的規範
  env: 'development', // 運行環境
  banner
},
複製代碼

以web-full-cjs-prod這個配置爲例，它的構建初始化過程以下圖所示。

接下來，咱們帶着問題去分析下具體的源碼。
好比說 Vue 是如何將模板渲染成虛擬 DOM 的？
因爲咱們主要是弄明白 Vue 的實現原理，因此此部分代碼是精簡後的，想看所有的代碼能夠從 GitHub 上拉取。