剖析 Vue.js 內部運行機制

知識 05-31

對於沒有閱讀過源碼或者沒有閱讀大型項目源碼經歷的新手同學，怎樣幫助他們上手研究 Vue.js 源碼？如果上來就像《Vue.js 源碼解析》一樣，採用通篇的源碼加上注釋的方式講解，不但會導致文章體量大代碼多，而且對他們來說也並不友好。因為源碼中有很多細節的東西，這些東西對於理解整個項目的內部運行機制並不那麼重要，所以應該是先理解內部運行機制，然後再去深剖這些細節。

那麼怎麼樣讓新手更容易理解這些內容呢？

於是筆者就誕生了一個想法：把 Vue.js 的核心源碼抽離出來，寫成一個一個代碼量更小更精細的 Demo ，形成一個簡易版的 Vue.js 輪子，嘗試用更少量的代碼講解核心部分內容，這樣能更好地讓人理解，畢竟大段的源碼在沒有上下文的情況下會讓人覺得晦澀難懂。

所以這本小冊就這樣誕生啦，期望能以一種對新手更加友好的方式來講解 Vue.js 內部運行機制。

講了那麼多，我們還是要介紹一下Vue.js這一款優秀的 MVVM 框架。 Vue.js 是一款專註於視圖層、用於構建用戶交互界面的響應式漸進框架。除了大大提高了開發效率並降低了維護成本以外，它還擁有著優雅的 API 設計、快速上手的特性，這使它已經成為了目前主流前端框架之一。

但是你們有沒有思考過：

Vue.js 究竟是如何在我們對數據進行操作的時候影響視圖的呢？

修改的數據如何批量高效地映射到視圖上呢？

傳統的 DOM 操作又在何時進行的呢？

很多同學並沒有對其原理有一個更深一層的理解，導致在遇到一些難以琢磨的問題的時候會感到無從下手。

本小冊希望通過一種對新手更加友好直觀的方式講解 Vue.js 內部運行機制。把 Vue.js 拆分成多個小模塊，講解模塊間的依賴以及調用關係。然後將源碼核心部分抽離壓縮，各個模塊以小 Demo 的形式展現出來，用最少的代碼講解內部實現。掌握了這些模塊的核心原理之後，再去閱讀 Vue.js 源碼或者是解決 Vue.js 的疑難雜症時，相信會更加得心應手。

程序界的「二八定律」，百分之八十的問題可以運用百分之二十的知識來解決，而剩下的百分之二十的問題需要運用百分之八十的知識來解決。準備好那百分之八十的知識，才會在遇到有挑戰的問題時更加遊刃有餘，機會永遠留給準備好的人。