技術驅動- Vue.js 源碼（一）

背景

本來並不是技術科班出身的我，是在泥地裏摸爬滾打一年後纔算入門前端，我都時刻謹記「紙上得來終覺淺，絕知此事要躬行。」，做爲一名合格的鍵盤俠，只有一切落到鍵盤上，纔會有所收穫嘛。

前幾天釘釘提示我入職一週年，再一次讓我感覺到時間過得好快，就是在咱們程序員的指尖溜走的。

那麼回顧這一年，對Vue.js更加熟悉，也入門了React + TypeScript。本着飯要一口一口的吃的中心思想，如今就鞭打，哦不，鞭策本身更加深刻學習Vue.js的原理部分來更完全的掌握它。

還等什麼，快開始吧

聲明： 本系列文章主要是參考Vue.js 技術揭祕來進行學習，屬於自我學習筆記。

學習結構以下圖所示⬇️(嘿，摸摸黨直接摸來用上了...)

上菜

關於Flow先無論了，畢竟和我以前使用的TS似曾相識，從源碼目錄設計開始吧。

源碼目錄設計

主要分析src目錄下的內容

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

compiler
衆所周知，Vue 2.x的有一個大的改進就是有了Virtual Dom，而Virtual Dom是由Render Function生成的。因此咱們日常寫的template，而後編譯成Render Function的相關邏輯就在compiler之中了。

core
顧名思義就是核心目錄了，分爲

components      # 內置組件
global-api      # 全局方法api
instance        # 事件，實例化，觀察者，生命週期以及渲染輔助函數
observer        # 響應式
util            # 工具方法
vdom            # 虛擬dom
複製代碼

platforms
分爲web和weex兩個平臺，存放一些和平臺相關代碼，好比compiler，runtime，server，util等等。platform 是入口文件，從不一樣平臺入口就能編譯出不一樣的Vue.js。

server
服務端渲染，是跑在服務端的Node.js，和跑在瀏覽器端的代碼仍是有很大差別化的。

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

sfc
把 .vue 文件內容解析成一個 JavaScript 的對象。

shared
這裏定義的工具方法都是會被瀏覽器端和服務端所共享的。

總結

分析後能夠看出，Vue.js 的功能模塊拆分的很是清楚，相關的邏輯放在一個獨立的目錄下維護，而且把複用的代碼也抽成一個獨立目錄。利於後期的代碼的閱讀和維護。