閱讀vue.js源碼可以從哪幾方面入手？

01-11

最近用vue做了一些項目，真心覺得好用，所以想更深入的了解內部的一些原理

看 @趙錦江(勾三股四) 的這篇博文：http://jiongks.name/blog/vue-code-review/

呃。 @尤雨溪我是一個commit一個commit看的。雖然笨拙，但是很好啊感覺被你一路帶著。學好多東西，謝謝作者。

以下言論只針對 vue 1.x

我猜測您說的『內部原理』大概是指:

bind 底層怎麼實現？
observe 怎麼做到那麼巧妙？
scope chain 在組件間怎麼表現得那麼神奇？
...

給您建議兩種行動思路：

1）邊跑邊調試

先看入門文檔，找個最簡單 demo 了解程序入口

然後仔細琢磨文檔，跑完所有 example，每個例子都會多少著重體現某些功能，你可以單步調試，結合單元測試，各個功能去擊破理解。其他框架我不敢說這麼做可行，但是 vue 的 api 命名真心不錯，看方法名基本就知道做啥。（我看完所有提交，作者每次 clear up 調整命名之後都有提神的效果）

2）逐次提交地看

你想在腦里 code 一遍框架嗎？
你想學習作者優雅的編碼嗎？
你想知道其實作者在某些程度跟你沒差多少嗎（不可能）？
你想知道比你聰（SHUAI）明（QI）的人還比你努力的感覺嗎？

對於 vue 1.x 的代碼來說，我從作者第一個 commit 開始逐個閱讀。作者從最初滿足自己工作需要實現核心的綁定功能，到後來不斷重構完善，確實很多奇淫技巧，特別是前期的 observe、依賴偵測相關的重構，我自己腦演了很多遍，收穫很多。

這是我的讀源碼筆記 zhenyong/notebook
沒整理過，如果錯誤，絕不負責！

另外準備對 vue 源碼的工具鏈作介紹，畢竟這些工具都很實用

戳這裡 Vue 源碼工具鏈介紹

先使用熟悉vue都有哪些功能。

然後排著看源碼就行了。都看完了，大腦會自動重組所有看過的東西。

這是因為尤大的代碼解耦得令人髮指，而且是高度扁平化的，基本沒有層級結構，不像樹，而像字典。邏輯網已經化在函數相互調用之中了，沒有一個所謂的架構層級得以入手。。

可以看我這個blog，對初學者很友好coderzzp/vue-come-true

如何自己動手做一個VUE

https://github.com/fastCreator/MVVM

vue源碼解析及實現