Vue源碼解讀(設計篇)

系列文章：vue

源碼目錄設計

Vue.js源碼目錄設計以下：web

|-- .circleci         # CI 配置目錄
|-- benchmarks        # vue的性能測試
|-- dist              # 構建目錄
|-- flow              # flow的類型聲明，相似於TypeScipt
|-- packages          # 衍生的npm包，例如vue-server-renderer和vue-template-compiler
|-- scripts           # 構建配置和構建腳本
|-- test              # 端到端測試和單元測試用例
|-- src               # 源代碼
|   |-- compiler      # 編譯相關代碼
|   |-- core          # 核心代碼
|   |-- platforms     # 跨平臺
|   |-- server        # 服務端渲染
|   |-- sfc           # .vue文件解析邏輯
|   |-- shared        # 工具函數/共享代碼
複製代碼

對以上目錄簡要作以下介紹：npm

benchmarks：vue 的性能測試,給使用者一個足夠的性能展現。
dist：rollup構建目錄，裏面存放了全部Vue構建後不一樣版本的文件。
flow：它是Facebook出品的JavaScript靜態類型檢查工具，早期Vue.js選擇了flow而不是如今的TypeScript來作靜態類型檢查，而在最新的Vue3.0版本則選擇使用TypeScript來重寫。
packages：Vue.js衍生的其它npm包，它們在Vue構建時自動從源碼中生成而且始終和Vue.js保持相同的版本，主要是vue-server-renderer和vue-template-compiler這兩個包，其中最後一個包在咱們使用腳手架生成項目，也就是使用.vue文件開發Vue項目時會使用到這個包。
scripts：rollup構建配置和構建腳本，Vue.js可以經過不一樣的環境構建不一樣的版本的祕密都在這個目錄下。
test：Vue.js測試目錄，自動化測試對於一個開源庫來講是相當重要的，測試覆蓋率在必定程度上是衡量一個庫質量的一個重要指標。測試用例不管對於開發仍是閱讀源碼，都是有很大益處的，其中經過測試用例去閱讀Vue源碼是廣泛認爲可行的一種方式。
src/compiler：此目錄包含了與Vue.js編譯相關的代碼，它包括：模板編譯成 AST 抽象語法樹、AST 抽象語法樹優化和代碼生成相關代碼。

// 須要使用帶編譯的版本
new Vue({
  data: {
    msg: 'hello,world'
  }
  template: '<div>{{msg}}</div>'
})

// 不須要使用帶編譯的版本
new Vue({
  data: {
    msg: 'hello,world'
  },
  render (h) {
    return h('div', this.msg)
  }
})
複製代碼

src/core：此目錄包含了Vue.js的核心代碼，包括：內置組件keep-alive、全局 API(Vue.use、Vue.mixin和Vue.extend等)、實例化、響應式相關、虛擬 DOM 和工具函數等。

|-- core
|   |-- components      # 內助組件
|   |-- global-api      # 全局API
|   |-- instance        # 實例化
|   |-- observer        # 響應式
|   |-- util            # 工具函數
|   |-- vdom            # 虛擬DOM
複製代碼

src/platform：Vue2.0提供了跨平臺的能力，在React中有React Native跨平臺客戶端，而在Vue2.0中其對應的跨平臺就是Weex。

|-- platform
|   |-- web      # web瀏覽器端
|   |-- weex     # native客戶端
複製代碼

src/server: Vue2.0提供服務端渲染的能力，全部跟服務端渲染相關的代碼都在server目錄下，此部分代碼是運行在服務端，而非 Web 瀏覽器端。
src/sfc：此目錄的主要做用是如何把.vue文件解析成一個JavaScript對象。
src/shared：此目錄下存放了一些在 Web 瀏覽器端和服務端都會用到的共享代碼。

架構設計

咱們經過以上目錄結構能夠很容易的發現，Vue.js總體分爲三個部分：核心代碼、跨平臺相關和公共工具函數。api

同時其架構是分層的，最底層是一個構造函數(普通的函數)，最上層是一個入口，也就是將一個完整的構造函數導出給用戶使用。在中間層，咱們須要逐漸添加一些方法和屬性，主要是原型prototype相關和全局API相關。瀏覽器