1.前言

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

项目地址:https://github.com/biaochenxuying/vue-family-mindmap

文章的图文结合版

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 语法、思维导图 的原文件,自己可以根据 思维导图原文件 导出相应的超清图片。

笔者文章常更地址:

1. 微信公众号
2. github
3. 全栈修炼

8. 最后

传承至善

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

参考开源项目:

  1. https://github.com/ustbhuangyi/vue-analysis
  2. https://github.com/HcySunYang/vue-design

一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构的更多相关文章

  1. Web思维导图实现的技术点分析(附完整源码)

    简介 思维导图是一种常见的表达发散性思维的有效工具,市面上有非常多的工具可以用来画思维导图,有免费的也有收费的,此外也有一些可以用来帮助快速实现的JavaScript类库,如:jsMind.KityM ...

  2. 14 张思维导图构建 Python 核心知识体系

    ZOE是一名医学生,在自己博客分享了很多高质量的思维导图.本文中所列的 14 张思维导图(高清图见文末),是 17 年作者开始学习 Python 时所记录的,希望对大家有所帮助.原文:https:// ...

  3. 一篇文章一张思维导图看懂Android学习最佳路线

    一篇文章一张思维导图看懂Android学习最佳路线 先上一张android开发知识点学习路线图思维导图 Android学习路线从4个阶段来对Android的学习过程做一个全面的分析:Android初级 ...

  4. 【转载】跟着9张思维导图学习JavaScript

    原文:跟着9张思维导图学习JavaScript 学习的道路就是要不断的总结归纳,好记性不如烂笔头,so,下面将 po 出我收集的 9 张 JavaScript相关的思维导图(非原创). 思维导图小ti ...

  5. Python 的 14 张思维导图汇总

    本文主要涵盖了 Python 编程的核心知识(暂不包括标准库及第三方库,后续会发布相应专题的文章). 首先,按顺序依次展示了以下内容的一系列思维导图:基础知识,数据类型(数字,字符串,列表,元组,字典 ...

  6. 【转载】一文总结学习 Python 的 14 张思维导图

    本文主要涵盖了 Python 编程的核心知识(暂不包括标准库及第三方库,后续会发布相应专题的文章). 首先,按顺序依次展示了以下内容的一系列思维导图:基础知识,数据类型(数字,字符串,列表,元组,字典 ...

  7. 一文总结学习 Python 的 14 张思维导图

    本文主要涵盖了 Python 编程的核心知识(暂不包括标准库及第三方库,后续会发布相应专题的文章). 首先,按顺序依次展示了以下内容的一系列思维导图:基础知识,数据类型(数字,字符串,列表,元组,字典 ...

  8. 跟着9张思维导图学习Javascript js 关键字和保留字 css3中的BFC,IFC,GFC和FFC

    跟着9张思维导图学习Javascript   学习的道路就是要不断的总结归纳,好记性不如烂笔头,so,下面将 po 出我收集的 9 张 javascript 相关的思维导图(非原创). 思维导图小ti ...

  9. 跟着9张思维导图学习Javascript

    学习的道路就是要不断的总结归纳,好记性不如烂笔头,so,下面将 po 出我收集的 9 张 javascript 相关的思维导图(非原创). 思维导图小tips: 思维导图又叫心智图,是表达发射性思维的 ...

随机推荐

  1. mysql启动报错:Failed to start LSB: start and stop MySQL

    报错信息: [root@youxx- bin]# service mysql status Redirecting to /bin/systemctl status mysql.service ¡ñ ...

  2. 搜索旋转排序数组II

    题目 假设按照升序排序的数组在预先未知的某个点上进行了旋转. ( 例如,数组 [,,,,,,] 可能变为 [,,,,,,] ). 编写一个函数来判断给定的目标值是否存在于数组中.若存在返回 true, ...

  3. virtualbox 配置记录

    virtualbox 网络模式 Host-only Internal Bridged NAT 之间的区别 host-only模式,host与vm一起在内部网络 Internal模式,仅vm在内部网络 ...

  4. IIS_CVE-2017-7269 IIS6.0远程代码执行漏洞复现

    CVE-2017-7269 IIS6.0远程代码执行漏洞复现 一.漏洞描述 IIS 6.0默认不开启WebDAV,一旦开启了WebDAV,安装了IIS6.0的服务器将可能受到该漏洞的威胁. 二.影响版 ...

  5. 阿里Jvm必问面试题及答案

    什么是Java虚拟机?为什么Java被称作是“平台无关的编程语言”? Java虚拟机是一个可以执行Java字节码的虚拟机进程.Java源文件被编译成能被Java虚拟机执行的字节码文件. Java被设计 ...

  6. Kibana插件开发

    当前开发环境 Kibana版本:7.2 elasticsearch版本:7.2 开发环境安装可参考:https://github.com/elastic/kibana/blob/master/CONT ...

  7. ssh关闭服务关闭 nohup

    默认输出 # nohup cmd & 指定输出路径 # nohup cmd > mylog.out 2>&1 &

  8. Constructing Roads POJ - 2421

    题目链接:https://vjudge.net/problem/POJ-2421 思路:一些村庄,建一些路,使得所有村庄能相连,而且使得所有路长度之和最短. 题目说了,有些村庄之间已经建了路,说明有些 ...

  9. 笔记3:MySQL数据库

    MySQL 1 基本概念 常见sql命令: show database 查看所有数据库 select now(); 显示当前时间 select version(); 显示当前版本 create dat ...

  10. C语言之double

    #include<stdio.h> int main(void) { printf("请分别输入身高的英尺和英寸,""如输入\"5 7\" ...