一張思惟導圖輔助你深刻了解 Vue | Vue-Router | Vuex 源碼架構

1.前言

本文內容講解的內容：一張思惟導圖輔助你深刻了解 Vue | Vue-Router | Vuex 源碼架構。

項目地址：github.com/biaochenxuy…

文章的圖文結合版

Vue-family.md

Vue-family.pdf

2. Vue 全家桶

先來張 Vue 全家桶 總圖：

3. Vue

細分以下

源碼目錄

源碼構建，基於 Rollup

Vue 本質：構造函數

數據驅動

組件化

深刻響應式原理

編譯

擴展

4. Vue-Router

introduction

路由註冊

VueRouter 對象

matcher

路徑切換

5. Vuex

introduction

Vuex 初始化

API

插件

6. 已完成與待完成

已完成：

• 思惟導圖

待完成：

• 繼續完善 思惟導圖
• 添加 流程圖

由於該項目都是業餘時間作的，筆者能力與時間也有限，不少細節尚未完善。

若是你是大神，或者對 vue 源碼有更好的看法，歡迎提交 issue ，你們一塊兒交流學習，一塊兒打造一個像樣的 講解 Vue 全家桶源碼架構 的開源項目。

7. 總結

以上內容是筆者最近學習 Vue 源碼時的收穫與所作的筆記，本文內容大可能是開源項目 Vue.js 技術揭祕 的內容，只不過是以思惟導圖的形式來展示，內容有省略，還加入了筆者的一點理解。

筆者之因此採用思惟導圖的形式來記錄所學內容，是由於思惟導圖更能反映知識體系與結構，更能令人造成完整的知識架構，知識一旦造成一個體系，就會容易理解和不易忘記。

注意：文章的圖片可能上傳時會通過壓縮，可能有點模糊，不過本文用到的 全部 超清圖片 都已經放在 github 上，並且還有 pdf 格式、markdown 語法、思惟導圖 的原文件，本身能夠根據 思惟導圖原文件 導出相應的超清圖片。

筆者文章常更地址：github

8. 最後

傳承至善

若是你以爲本文章或者項目對你有啓發，請給個贊或者 star 吧，點贊是一種美德，謝謝。

參考開源項目：

1. github.com/ustbhuangyi…
2. github.com/HcySunYang/…