一篇平平無奇又低調實用的Vue.js源碼開發技巧

Vue.js 的源碼都在 src 目錄下，其目錄結構以下。

01 compiler

compiler 目錄包含 Vue.js 全部編譯相關的代碼。它包括把模板解析成 ast 語法樹，ast 語法樹優化，代碼生成等功能。

編譯的工做能夠在構建時作（藉助 webpack、vue-loader 等輔助插件）；也能夠在運行時作，使用包含構建功能的 Vue.js。顯然，編譯是一項耗性能的工做，因此更推薦前者——離線編譯。

02 core

core 目錄包含了 Vue.js 的核心代碼，包括內置組件、全局 API 封裝，Vue 實例化、觀察者、虛擬 DOM、工具函數等等。

這裏的代碼可謂是 Vue.js 的靈魂，也是咱們以後須要重點分析的地方。

03 platform

Vue.js 是一個跨平臺的 MVVM 框架，它能夠跑在 web 上，也能夠配合 weex 跑在 natvie 客戶端上。platform 是 Vue.js 的入口，2 個目錄表明 2 個主要入口，分別打包成運行在 web 上和 weex 上的 Vue.js。

咱們會重點分析 web 入口打包後的 Vue.js，對於 weex 入口打包的 Vue.js，感興趣的同窗能夠自行研究。

04 server

Vue.js 2.0 支持了服務端渲染，全部服務端渲染相關的邏輯都在這個目錄下。注意：這部分代碼是跑在服務端的 Node.js，不要和跑在瀏覽器端的 Vue.js 混爲一談。

服務端渲染主要的工做是把組件渲染爲服務器端的 HTML 字符串，將它們直接發送到瀏覽器，最後將靜態標記"混合"爲客戶端上徹底交互的應用程序。

05 sfc

一般咱們開發 Vue.js 都會藉助 webpack 構建， 而後經過 .vue 單文件的編寫組件。

這個目錄下的代碼邏輯會把 .vue 文件內容解析成一個 JavaScript 的對象。

06 shared

Vue.js 會定義一些工具方法，這裏定義的工具方法都是會被瀏覽器端的 Vue.js 和服務端的 Vue.js 所共享的。

總結

從 Vue.js 的目錄設計能夠看到，做者把功能模塊拆分的很是清楚，相關的邏輯放在一個獨立的目錄下維護，而且把複用的代碼也抽成一個獨立目錄。

這樣的目錄設計讓代碼的閱讀性和可維護性都變強，是很是值得學習和推敲的。

關於vue.js還有不少須要一塊兒學習和探討的地方，歡迎你們與我一塊兒交流和討論