总结Vue | Vue-Router | Vuex 源码与架构要点思维导图

╰+哭是因爲堅強的太久メ 2021-07-04 21:12 416阅读 0赞

## 1.前言 ##

本文内容讲解的内容：**一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构**。

## 2. Vue 全家桶 ##

先来张 Vue 全家桶 总图预览：  
![在这里插入图片描述][2019092015453341.png]  
Vue 全家桶总图 - 详细图：  
![在这里插入图片描述][20190920154725253.jpg]

## 3. Vue ##

细分如下

### 源码目录 ###

![在这里插入图片描述][20190920154840850.png]

### 源码构建，基于 Rollup ###

![在这里插入图片描述][20190920154917279.png]

### Vue 本质：构造函数 ###

![在这里插入图片描述][20190920154946995.png]

### 数据驱动 ###

\[外链图片转存失败(img-bCy590Ai-1568957590888)(./vue/4.png)\]  
![在这里插入图片描述][20190920155020636.png]

### 组件化 ###

![在这里插入图片描述][2019092015505221.png]

### 深入响应式原理 ###

![在这里插入图片描述][20190920155152927.png]

### 编译 ###

![在这里插入图片描述][20190920155219589.png]

### 扩展 ###

![在这里插入图片描述][20190920155247475.png]

## 4. Vue-Router ##

Vue-Router 预览图：  
![在这里插入图片描述][20190920155329231.png]  
Vue-Router 详细图：  
![在这里插入图片描述][20190920155352280.png]

### introduction ###

![在这里插入图片描述][20190920155421165.png]

### 路由注册 ###

\[外链图片转存失败(img-XmMM58ne-1568957590890)(./vue-router/2.png)\]  
![在这里插入图片描述][20190920155439830.png]

### VueRouter 对象 ###

\[外链图片转存失败(img-7bCN9RHy-1568957590890)(./vue-router/3.png)\]  
![在这里插入图片描述][20190920155452457.png]

### matcher ###

![在这里插入图片描述][2019092015550728.png]

### 路径切换 ###

![在这里插入图片描述][20190920155522708.png]

## 5. Vuex ##

Vuex 预览图：  
![在这里插入图片描述][2019092015560030.png]  
Vuex 详细图：  
![在这里插入图片描述][20190920155623510.png]

### introduction ###

![在这里插入图片描述][20190920155700405.png]

### `Vuex` 初始化 ###

![在这里插入图片描述][20190920155725631.png]

### API ###

![在这里插入图片描述][20190920155908236.png]

### 插件 ###

![在这里插入图片描述][20190920155928849.png]

## 6. 已完成与待完成 ##

**已完成**

*  思维导图

**待完成**

*  继续完善 思维导图
 *  添加 流程图

因为该项目都是业余时间做的，笔者能力与时间也有限，很多细节还没有完善。

如果你是大神，或者对 `vue` 源码有更好的见解，**欢迎提交 issue ，大家一起交流学习，一起打造一个像样的 讲解 Vue 全家桶源码架构 的开源项目**。

## 7. 总结 ##

以上内容是笔者最近学习 `Vue` 源码时的收获与所做的笔记，本文内容大多是开源项目 **Vue.js 技术揭秘** 的内容，只不过是以思维导图的形式来展现，内容有省略，还加入了笔者的一点理解。

笔者之所以采用思维导图的形式来记录所学内容，是因为思维导图更能反映知识体系与结构，更能使人形成完整的知识架构，知识一旦形成一个体系，就会容易理解和不易忘记。

> **注意**：文章的图片可能上传时会经过压缩，可能有点模糊，不过本文用到的 所有 **超清图片** 都已经放在 [github][] 上，而且还有 **pdf 格式、markdown 语法、思维导图 的原文件**，自己可以根据 **思维导图原文件** 导出相应的超清图片。

[2019092015453341.png]: /images/20210704/37221e7800704cb0bfeb7d00b7294510.png
[20190920154725253.jpg]: /images/20210704/97bbebe95cf34f75bd89b95fe473c1ad.png
[20190920154840850.png]: /images/20210704/c0af317505704e168dc92e4a72aa325e.png
[20190920154917279.png]: /images/20210704/371d9f4ed8244d8ca072046622d28a34.png
[20190920154946995.png]: /images/20210704/c6f8bb66fee0408ba70a2553abdc0938.png
[20190920155020636.png]: /images/20210704/090cc8872bbd4cea896d0176981ed865.png
[2019092015505221.png]: /images/20210704/b31eec7c9c0941438df0faa857b6cdcd.png
[20190920155152927.png]: /images/20210704/6ae773c2a3ff469182a7864be113ad5b.png
[20190920155219589.png]: /images/20210704/0ac4fe9125c94d7f82d13ec725dd0e5c.png
[20190920155247475.png]: /images/20210704/a56f3fac81644bd1a5dca82f8c7f1497.png
[20190920155329231.png]: /images/20210704/39ee6f472f0d41a9bd9f6fb4d09fbd04.png
[20190920155352280.png]: /images/20210704/cb687e7cd6de4e16a488b7eb6f8b25f2.png
[20190920155421165.png]: /images/20210704/c933a8d67b05446eaca78d9b58ac30da.png
[20190920155439830.png]: /images/20210704/63acef8414df403b95454c3389c5c40e.png
[20190920155452457.png]: /images/20210704/8585bb4f82684956be35a04cdd52f942.png
[2019092015550728.png]: /images/20210704/7458986d27874a23ac10ce4af3c04d37.png
[20190920155522708.png]: /images/20210704/63b1ee9b4f2a400082c75597de1ac457.png
[2019092015560030.png]: /images/20210704/f443ab3068644f70b2572e095a7d84ba.png
[20190920155623510.png]: /images/20210704/180b146728734034bf1b5b18eac5d0d5.png
[20190920155700405.png]: /images/20210704/d9b9a04304d44477a0b265355228fdb6.png
[20190920155725631.png]: /images/20210704/e76017d3efeb4ef6b4ac54a8cffd2a86.png
[20190920155908236.png]: /images/20210704/d1d37c66de5d4fbfa0f0d89ba72cf813.png
[20190920155928849.png]: /images/20210704/f8ea778a2aa241c8927909e551db5357.png
[github]: https://github.com/biaochenxuying/vue-family-mindmap