來，送你一本免費的Vue源碼解析！

噔噔噔噔！合計8萬多字的Vue源碼分析終於告一段落了。過程不易，碼字辛苦，但願走過路過的兄弟們能賞個贊，給個star，萬分感謝。

完整地址：深刻剖析Vue源碼

過程感悟

這個系列能連載說實話也挺不容易的，最開始的目標是在每次讀完源碼以後能把對過程的思考以及對做者思路的猜想作些筆記，以達到能更深入理解這個框架，更快定位問題的目的。然而隨着過程的進行，慢慢發現源碼中每一個實現，每一個細節都有不少值得思考的東西，也漸漸喜歡上了這種以博客形式分析記錄的方式，最終也有了這份記錄的合集。

源碼分析的過程是枯燥的，也是難以入手的，因此也特別感謝網上能夠看到的一些源碼解析的文章，站在了巨人的肩膀上讓本身少走了不少的彎路。因爲自身能力的不足，視野的受限，不免對源碼內部的理解會有不少錯誤的地方，但願有興趣看的各位能提供建議，也但願各位可以多多包涵。

最後我以爲寫完這個系列最大的收穫有三點：首先是文字表達能力的提高，畢竟這麼多字寫下來，總歸在文字表達方面有所成長。而後就是能更加遊刃有餘的定位問題，儘管這個系列並不能涵蓋全部的知識，可是分析源碼的過程讓本身在平常開發中快速定位解決問題的能力有了很大的提高。最後就是框架思想的運用，源碼中有不少的思想，若是你不去看，在開發中是想不到的，可以將好的框架的思想運用到平常的項目中，纔是最大的提高。

章節結構

豐富的選項合併策略

new Vue是運行Vue框架的第一步，Vue做爲構造器，實例化階段的第一步是執行初始化過程，而選項合併是初始化的開始。咱們會向構造器中傳遞各類類型的可配置選項，例如data,props,或者像mounted這類生命週期鉤子。而除了這些用戶自定義的選項，Vue還提供了不少內部的選項，這些選項遵循什麼樣的合併規則就是這一節分析的重點。

深刻剖析Vue源碼 - 選項合併(上)

深刻剖析Vue源碼 - 選項合併(下)

基礎的數據代理

使用Vue作開發的同窗都知道，Vue的核心是它的響應式系統，而響應式系統的核心是利用了Object.defineProperty進行數據攔截，這一節內容會深刻分析Vue中兩種數據攔截的方式：Object.defineProperty,Proxy,儘管響應式系統用的是兼容性更好的Object.defineProperty，可是proxy也在源碼中使用上了，其中的一個例子就是用做數據過濾篩選。

深刻剖析Vue源碼 - 基礎的數據代理檢測

完整掛載流程和模板編譯

Vue版本提供了運行時版本和同時包含編譯器和運行時的版本，他們都有各自的使用場景。除了介紹二者的區別外，文章的核心還介紹了實例在掛載階段的完整流程，雖然不會對流程中的每一個具體環節展開分析，可是能夠知道大體完整的掛載思路。文章最後還介紹了編譯器巧妙的設計思路。

深刻剖析Vue源碼 - 完整掛載流程和模板編譯

完整渲染流程

Virtual DOM是js操做和DOM渲染之間的橋樑，JS對DOM節點的操做，都會批量反應到Virtual DOM這個節點描述對象上，它的理念很大程度提升了渲染的性能。有了上一節的基礎，這一節會分析兩個掛載階段的核心過程，render,update,render階段會將模板編譯渲染函數，解析成Virtual DOM樹，update階段會將Virtual DOM樹映射爲真實的DOM節點。

深刻剖析Vue源碼 - 完整渲染流程

組件基礎剖析

組件是Vue另外一個核心，組件化開發是衡量Vue開發能力的標準。文章會從組件的註冊開始，介紹全局註冊和局部註冊在實現原理上的區別，另外組件的掛載流程也是分析的重點，這一切也都依賴於前面介紹過的渲染流程。

深刻剖析Vue源碼 - 組件基礎剖析

組件高級用法

除了基礎的組件用法，Vue還提供了高級的用法，例如異步組件和函數組件。異步組件是首屏性能優化的解決方案，深刻它的實現原理更有助於咱們在開發中首屏性能問題。而函數式組件也有其獨特的使用場景。 深刻剖析Vue源碼 - 組件高級用法

深刻響應式系統構建- 上，中，下

響應式系統構建是Vue的核心，也是難點，這個系列會有三篇的內容去嘗試分析內部的實現細節。從響應式數據的構建，再到每種數據類型依賴收集和派發更新的分析。文章也模擬了一個簡易版的響應式系統方便深層次源碼的分析。在響應式系統構建中，還有不少的特殊狀況須要考慮，例如數組的響應式構建，對象的異常處理等。

深刻剖析Vue源碼 - 響應式系統構建(上) 深刻剖析Vue源碼 - 響應式系統構建(中) 深刻剖析Vue源碼 - 響應式系統構建(下)

diff算法的實現

virtual dom引入的另外一個關鍵是在舊節點發生改變時，利用diff算法比較新舊節點的差別，以達到最小變化的改變真實節點。文章會從脫離框架的角度實現一個diff算法。

深刻剖析Vue源碼 - 來，跟我一塊兒實現diff算法!

揭祕Vue的事件機制

Vue提供了不少實用的功能給用戶，其中一個就是使用模板去進行事件監聽。@click做爲事件指令會在模板編譯階段解析，而且會在真實節點的渲染階段進行相關事件的綁定。而對於組件的事件而言，他提供了子父組件通訊的方式，本質上是在同個子組件內部維護了一個事件總線。更多的內容能夠參考文章的分析。

深刻剖析Vue源碼 - 揭祕Vue的事件機制

你想了解的Vue插槽

Vue組件的另外一個重要概念是插槽，它容許你以一種不一樣於嚴格的父子關係的方式組合組件。插槽爲你提供了一個將內容放置到新位置或使組件更通用的出口。這一節將圍繞官網對插槽內容的介紹思路，按照普通插槽，具名插槽，再到做用域插槽的思路，逐步深刻內部的實現原理。

深刻剖析Vue源碼 - Vue插槽，你想了解的都在這裏!

v-model的語法糖

咱們都知道v-model是實現雙向數據綁定的核心，但若是深刻源碼咱們能夠知道，v-model的核心只是經過事件觸發去改變表單的值。除此以前v-model語法糖還在組合輸入過程作了一系列的優化。另外組件上使用v-model本質上只是一個子父組件通訊的語法糖。

深刻剖析Vue源碼 - 你瞭解v-model的語法糖嗎？

動態組件的深刻分析

這一節，咱們又回到了組件的分析。動態組件是咱們平時開發中高頻率使用的東西。核心是is屬性的使用。文末還粗略介紹了另外一個概念，動態組件。

深刻剖析Vue源碼 - Vue動態組件的概念，你會亂嗎？

keep-alive的魔法

內置組件中最重要，也是最常用的是keep-alive組件，咱們將keep-alive配合動態組件is使用，達到在切換組件的同時，將舊組件進行緩存，以便保留初始狀態的目的。keep-alive有不一樣於其餘組件的生命週期，而且他在緩存上也作了優化。