入口文件開始,分析Vue源碼實現


Why?

網上現有的Vue源碼解析文章一搜一大批,但是為什么我還要去做這樣的事情呢?因為覺得紙上得來終覺淺,絕知此事要躬行

然后平時的項目也主要是Vue,在使用Vue的過程中,也對其一些約定產生了一些疑問,可能官網上只會建議你這么做,但是核心實現我們可能並不知道。比如:

  • v-for key 是如何達到“就地復用”策略
  • 數組更新檢測是如何完成的
  • set 為什么就能動態添加根級別的響應式屬性
  • 為什么Vue可以跨平台支持weex,以及后來出現的mpvue
  • ...

其次,很久沒有更新內容了,之前對Vue源碼也是有點研究,只不過沒有很體系的記錄,現在抽了點時間,做了一次基礎的總結吧。一方面是因為想要克服自己的惰性,另一方面也是想重新溫故一遍。

What?

一共分成了10個基礎部分,后續還會繼續記錄。我們可以先看一下概覽:

然后我們來看一下基礎的目錄:

入口開始,解讀Vue源碼(一)———— 造物創世

入口開始,解讀Vue源碼(二)—— new Vue 的故事

入口開始,解讀Vue源碼(三)—— initMixin 上篇

入口開始,解讀Vue源碼(三)—— initMixin 下篇

入口開始,解讀Vue源碼(四)—— 實現一個基礎的 Vue 雙向綁定

入口開始,解讀Vue源碼(五)—— $mount 內部實現

入口開始,解讀Vue源碼(六)—— $mount 內部實現 --- compile parse函數生成AST

入口開始,解讀Vue源碼(七)—— $mount 內部實現 --- compile optimize標記節點

入口開始,解讀Vue源碼(八)—— $mount 內部實現 --- compile generate 生成render函數

入口開始,解讀Vue源碼(九)—— $mount 內部實現 --- render函數 --> VNode

入口開始,解讀Vue源碼(十)—— $mount 內部實現 --- patch

End?

文章前后也是利用碎片時間總結整理而成,有些也是翻閱了很多的資料,也有過引用巨人的段落,文章中有所標注。如果沒有標注,可能是本人忘記了,歡迎提醒。文章中如果有筆誤或者不正確的解釋,也歡迎批評指正,共同進步。

最后:

github地址

部分源碼demo


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM