# vue-family-mindmap

**Repository Path**: badboyoo/vue-family-mindmap

## Basic Information

- **Project Name**: vue-family-mindmap
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-07-12
- **Last Updated**: 2021-07-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

![vue](https://upload-images.jianshu.io/upload_images/12890819-7820bc20092c4c40.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

## 1.前言

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

项目地址：[https://github.com/biaochenxuying/vue-family-mindmap](https://github.com/biaochenxuying/vue-family-mindmap)

[详细图](./Vue-family.jpg)

[文章的图文结合版](https://biaochenxuying.cn/articleDetail?article_id=5cd7896c74289f3d47ed13ea)

[Vue-family.md](https://github.com/biaochenxuying/vue-family-mindmap/blob/master/Vue-family.md)

[Vue-family.pdf](https://github.com/biaochenxuying/vue-family-mindmap/blob/master/Vue-family.pdf)



## 2. Vue 全家桶

先来张 Vue 全家桶 总图预览：

![Vue 全家桶总图 - 详细图](./Vue-family-min.png)

Vue 全家桶总图 - 详细图：

![Vue 全家桶总图 - 详细图](./Vue-family.jpg)


## 3. Vue 

细分如下

### 源码目录


![源码目录](./vue/1.png)

### 源码构建，基于 Rollup 

![源码构建，基于 Rollup](./vue/2.png)

### Vue 本质：构造函数


![Vue 本质：构造函数](./vue/3.png)

### 数据驱动


![数据驱动](./vue/4.png)

### 组件化

![组件化](./vue/5.png)

### 深入响应式原理

![深入响应式原理](./vue/6.png)

### 编译

![编译](./vue/7.png)

### 扩展

![编译](./vue/8.png)


## 4. Vue-Router

Vue-Router 预览图：

![Vue-Router](./vue-router/Vue-Router-min.png)

Vue-Router 详细图：

![Vue-Router](./vue-router/Vue-Router.png)

### introduction


![introduction](./vue-router/1.png)

### 路由注册

![路由注册](./vue-router/2.png)

### VueRouter 对象

![VueRouter 对象](./vue-router/3.png)

### matcher

![matcher](./vue-router/4.png)

### 路径切换


![路径切换](./vue-router/5.png)

## 5. Vuex


Vuex 预览图：

![Vuex](./vuex/Vuex-min.png)

Vuex 详细图：

![Vuex](./vuex/Vuex.png)

### introduction

![introduction](./vuex/1.png)

### Vuex 初始化

![Vuex 初始化](./vuex/2.png)

### API

![API](./vuex/3.png)

### 插件


![插件](./vuex/4.png)

## 6. 已完成与待完成

**已完成**

- 思维导图

**待完成**

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

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

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

## 7. 总结

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

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

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

笔者文章常更地址：[github](https://github.com/biaochenxuying/blog) 

## 8. 最后

> 传承至善

如果你觉得本文章或者项目对你有启发，请给个赞或者  star 吧，点赞是一种美德，谢谢。

参考开源项目：

1. [https://github.com/ustbhuangyi/vue-analysis](https://github.com/ustbhuangyi/vue-analysis)
2. [https://github.com/HcySunYang/vue-design](https://github.com/HcySunYang/vue-design)