大家好，我是你們的 貓哥，那個(gè)不喜歡吃魚、又不喜歡喵 的超級(jí)貓 ~

1. 為什么要學(xué)習(xí)源碼 ?

閱讀優(yōu)秀的代碼的目的是讓我們能夠?qū)懗鰞?yōu)秀的代碼。

不給自己設(shè)限，不要讓你周圍人的技術(shù)上限成為你的上限。其實(shí)就跟我們寫作文一樣，你看的高分作文越多，寫出高分作文的概率就越大。

基于現(xiàn)在的程序員工作模式(模塊化開發(fā)，只需要拿到需求做自己的部分)，別說看源碼，甚至就連項(xiàng)目里的代碼都懶的去看，我認(rèn)識(shí)的很多程序員就是這樣的，一個(gè)項(xiàng)目摸了兩三年，你要問他項(xiàng)目中 webpack 都干了哪些事情，他的回答是不知道，反而趾高氣揚(yáng)的告訴你，那些他從來都用不上，看了也沒什么用，也看不懂，這里省略內(nèi)心千字臟文。

閱讀主要目的 是為了幫助我們 積累素材，不要書到用時(shí)方恨少，看到美女我們應(yīng)該能有一萬種詞語(yǔ)去形容，如氣若幽蘭，美艷不可方物，一笑傾城，再笑傾國(guó)，世間尤物，而不是簡(jiǎn)短的幾個(gè)字，我艸，美女!

功利性的閱讀源碼

功利性即指有目的性的，明確知道自己干完某一件事后能得到什么樣的回報(bào)，所以首先你要知道你想得到什么？

看每一本書都有明確的目的，想學(xué)會(huì)理財(cái)，就得看理財(cái)相關(guān)的書，想學(xué)點(diǎn)技術(shù)，就得看點(diǎn)技術(shù)相關(guān)的書

看源碼也是一樣，你對(duì) Vue.use 之后發(fā)生了什么比較好奇，或者是你覺得現(xiàn)在面試都需要會(huì)看點(diǎn)源碼，這都很好，至少你有明確的訴求

凡事只要有了功利屬性，才更容易走的下去，否則就是真香警告。

2. Vue2

Vue 雖然出到 Vue3 了，也出了不少 Vue3 的源碼教程，但是 Vue2 還是很棒的框架，它的源碼還是值得細(xì)讀的，所以先推薦幾個(gè) Vue2 的源碼項(xiàng)目。

2.1 vue-analysis

???? Vue.js 源碼分析

目前社區(qū)有很多 Vue.js 的源碼解析文章，但是質(zhì)量層次不齊，不夠系統(tǒng)和全面，這本電子書的目標(biāo)是全方位細(xì)致深度解析 Vue.js 的實(shí)現(xiàn)原理，讓同學(xué)們可以徹底掌握 Vue.js。目前分析的版本是 Vue.js 的最新版本 Vue.js 2.5.17-beta.0，并且之后會(huì)隨著版本升級(jí)而做相應(yīng)的更新，充分發(fā)揮電子書的優(yōu)勢(shì)。

這本電子書是作為?《Vue.js 源碼揭秘》 視頻課程的輔助教材。電子書是開源的，同學(xué)們可以免費(fèi)閱讀，視頻是收費(fèi)的，25+小時(shí)純干貨課程，如果有需要的同學(xué)可以購(gòu)買來學(xué)習(xí)，但請(qǐng)務(wù)必支持正版，請(qǐng)尊重作者的勞動(dòng)成果。

https://github.com/ustbhuangyi/vue-analysis

2.2 vue-design

超級(jí)詳細(xì) - 逐行級(jí)別的分析

所謂逐行并非一行接著一行，逐行指的是講解的詳細(xì)程度，這套文章將致力于覆蓋所有核心代碼，畢竟每一句代碼都有他存在的意思，假如我們不講明白任何一句代碼的意義，那又怎么敢說是源碼分析呢？

深度分析 - 講解 issue

我們知道 Vue 這個(gè)項(xiàng)目自誕生以來一直都在不斷的更新完善，比如添加新的特性，修復(fù)已知bug等等。而在這個(gè)過程中源碼也將越來越完善，這也意味著代碼曾經(jīng)并不完善，本套文章在分析源碼時(shí)除了告訴你這段代碼為什么這么寫之外，還會(huì)根據(jù)相關(guān) issue 分析這段代碼之前是怎么寫的以及存在的問題。

http://hcysun.me/vue-design/zh/

2.3 vue-family-mindmap

用一張思維導(dǎo)圖總結(jié)了 Vue | Vue-Router | Vuex 源碼與架構(gòu)要點(diǎn)。

以上內(nèi)容是筆者最近學(xué)習(xí) Vue 源碼時(shí)的收獲與所做的筆記，本文內(nèi)容大多是開源項(xiàng)目?Vue.js 技術(shù)揭秘?的內(nèi)容，只不過是以思維導(dǎo)圖的形式來展現(xiàn)，內(nèi)容有省略，還加入了筆者的一點(diǎn)理解。

筆者之所以采用思維導(dǎo)圖的形式來記錄所學(xué)內(nèi)容，是因?yàn)樗季S導(dǎo)圖更能反映知識(shí)體系與結(jié)構(gòu)，更能使人形成完整的知識(shí)架構(gòu)，知識(shí)一旦形成一個(gè)體系，就會(huì)容易理解和不易忘記。

注意：文章的圖片可能上傳時(shí)會(huì)經(jīng)過壓縮，可能有點(diǎn)模糊，不過本文用到的 所有?超清圖片?都已經(jīng)放在?github?上，而且還有?pdf 格式、markdown 語(yǔ)法、思維導(dǎo)圖 的原文件，自己可以根據(jù)?思維導(dǎo)圖原文件?導(dǎo)出相應(yīng)的超清圖片。

https://github.com/biaochenxuying/vue-family-mindmap

2.4 learnVue

Vue.js 源碼分析，記錄了個(gè)人學(xué)習(xí) Vue.js 源碼的過程中的一些心得以及收獲。以及對(duì)于 Vue 框架，周邊庫(kù)的一些個(gè)人見解。

在學(xué)習(xí)的過程中我為Vue.js（2.3.0）、Vuex（2.4.0）、Vue-router（3.0.1）加上了注釋，分別在文件夾 vue-src、vuex-src 以及 vue-router-src 中，希望可以幫助有需要的同學(xué)更好地學(xué)習(xí)理解 Vue.js 及周邊庫(kù)的源碼。

https://github.com/answershuto/learnVue

2.5 vue

Vue 源碼逐行注釋分析 +40 多 M 的 Vue 源碼程序流程圖思維導(dǎo)圖 （diff 部分待后續(xù)更新）

Vue 源碼業(yè)余時(shí)間差不多看了一年，以前在網(wǎng)上找帖子，發(fā)現(xiàn)很多帖子很零散，都是一部分一部分說，斷章的很多，所以自己下定決定一行行看，經(jīng)過自己堅(jiān)持與努力，現(xiàn)在基本看完了 。

這個(gè) Vue 源碼逐行分析，我基本每一行都打上注釋，加上整個(gè)框架的流程思維導(dǎo)圖，基本上是小白也能看懂的 Vue 源碼了。

https://github.com/qq281113270/vue

2.6 vue2.0-source

Vue 源碼分析 -- 基于 2.2.6 版本

該源碼分析，會(huì)帶著大家一起學(xué)習(xí) Vue 的大部分代碼，而不是簡(jiǎn)單的講一下它的原理，我會(huì)盡可能的多解釋每一行主要的代碼含義，另外一些輔助方法什么的，大家可以在學(xué)習(xí)的過程中，自己看一眼就知道了。

https://github.com/liutao/vue2.0-source

3. Vue3

3.1 中文學(xué)習(xí)網(wǎng)址

先給大家提供 2 個(gè) Vue3 的中文學(xué)習(xí)網(wǎng)址。

Vue3 中文文檔，國(guó)內(nèi) CDN 加速版

https://vue3js.cn/docs/zh/

Vue3 相關(guān)項(xiàng)目聚合網(wǎng)站

https://vue3js.cn/

---

3.2 Vue3 源碼

https://vue3js.cn/start/

最后

更多關(guān)于 Vue3 的優(yōu)質(zhì)項(xiàng)目，請(qǐng)看往期精文：Vue3 的學(xué)習(xí)教程匯總、源碼解釋項(xiàng)目、支持的 UI 組件庫(kù)、優(yōu)質(zhì)實(shí)戰(zhàn)項(xiàng)目

平時(shí)如何發(fā)現(xiàn)好的開源項(xiàng)目，可以看看這篇文章：GitHub 上能挖礦的神仙技巧 - 如何發(fā)現(xiàn)優(yōu)秀開源項(xiàng)目

---

關(guān)于貓哥，大家可以看看我的年終總結(jié) 前端工程師的 2020 年終總結(jié) - 乾坤未定，你我皆黑馬。

不知不覺，已經(jīng)寫到第 31?期了呢，往期精文請(qǐng)看下方寶藏倉(cāng)庫(kù)，請(qǐng)慎入！

https://github.com/FrontEndGitHub/FrontEndGitHub

往期精文

• GitHub 5W 星：一行命令下載全網(wǎng)視頻的兩個(gè)開源項(xiàng)目

• Ｂ站收藏 12.5w+！GitHub 標(biāo)星 6.6k+！這門神課拯救了我薄弱的計(jì)算機(jī)基礎(chǔ)

• GitHub 2W 星：一鍵生成前后端代碼

• Vue3 的學(xué)習(xí)教程匯總、源碼解釋項(xiàng)目、支持的 UI 組件庫(kù)、優(yōu)質(zhì)實(shí)戰(zhàn)項(xiàng)目

• 程序員必備的 10 大 GitHub 倉(cāng)庫(kù)，前端占了 7 個(gè)！

微信搜 “前端GitHub”，回復(fù) “電子書” 即可以獲得 160 本前端精華書籍哦，貓哥 WX：CB834301747 。

原創(chuàng)不易，請(qǐng)給個(gè)鼓勵(lì)

總結(jié)

以上是生活随笔為你收集整理的推荐 7 个 Vue2、Vue3 源码解密分析的开源项目的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。