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. Window权限维持(三):服务

    如果未正确配置Windows环境中的服务或这些服务可以用作持久性方法,则这些服务可能导致权限提升.创建一个新的服务需要管理员级别的特权,它已经不是隐蔽的持久性技术.然而,在红队的行动中,针对那些在威胁 ...

  2. 『字符合并 区间dp 状压dp』

    字符合并 Description 有一个长度为 n 的 01 串,你可以每次将相邻的 k 个字符合并,得到一个新的字符并获得一定分数.得到的新字符和分数由这 k 个字符确定.你需要求出你能获得的最大分 ...

  3. 从新手小白到老手大白的心路历程-First Blog

    本人于2019年毕业重庆市某一所乡间大学,所学专业方向是.net,至今已经工作了1个多月了,天天被上司骂,还差点儿被开除,但我死皮赖脸的勉强的“活”了下来,在今后的日子里面,我会陆续的分享我的成长经历 ...

  4. .net基础加强

    1.冒泡排序 请通过冒泡排序法对整数数组{ 1, 3, 5, 7, 90, 2, 4, 6, 8, 10 }实现升序排序 , , , , , , , , , }; BubbleSort(num); C ...

  5. Git以及GitHub的一些基本使用

    1:注册GitHub账号: https://github.com/ 2:Git bash工具下载地址 https://gitforwindows.org/ 3:怎么在GitHub 新增 SSH Key ...

  6. Linux文本文件——管理文本的命令

    Linux文本文件——管理文本的命令 摘要:本文主要学习了在Linux中管理文本的命令. cat命令 cat命令用来显示文本文件的内容,也可以把几个文件内容附加到另一个文件中,即连接合并文件,是Con ...

  7. JavaScript中的 JSON 和 JSONP

    JSON 和 JSONP JSONP是一种发送JSON数据的方法,无需担心跨域问题.JSONP不使用该XMLHttpRequest对象.JSONP使用<script>标签代替.由于跨域策略 ...

  8. 批处理(bat)的一些记录

    总览:https://www.jb51.net/article/151923.htm 如何判断空格与回车的输入:https://www.lmdouble.com//113311107.html 设置命 ...

  9. Try-Catch-Finally语句块执行问题

    Try-Catch-Finally语句块执行问题 记录一个今天某公司的面试问题,其实我问题回答对了,但是面试官问我动手验证过没有,这还真没有,纯理论,被怼惨了,希望自己能变得更强大. Try-Catc ...

  10. PHP严重致命错误处理:php Fatal error: Cannot redeclare class or function【转】

    这篇文章主要介绍了PHP严重致命错误处理:php Fatal error: Cannot redeclare class or function,需要的朋友可以参考下 1.错误类型:PHP致命错误 E ...