1.前言
本文内容讲解的内容:一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构。
项目地址:https://github.com/biaochenxuying/vue-family-mindmap
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 语法、思维导图 的原文件,自己可以根据 思维导图原文件 导出相应的超清图片。
笔者文章常更地址:
8. 最后
传承至善
如果你觉得本文章或者项目对你有启发,请给个赞或者 star 吧,点赞是一种美德,谢谢。
参考开源项目:
一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构的更多相关文章
-
14 张思维导图构建 Python 核心知识体系
ZOE是一名医学生,在自己博客分享了很多高质量的思维导图.本文中所列的 14 张思维导图(高清图见文末),是 17 年作者开始学习 Python 时所记录的,希望对大家有所帮助.原文:https:// ...
-
一篇文章一张思维导图看懂Android学习最佳路线
一篇文章一张思维导图看懂Android学习最佳路线 先上一张android开发知识点学习路线图思维导图 Android学习路线从4个阶段来对Android的学习过程做一个全面的分析:Android初级 ...
-
【转载】跟着9张思维导图学习JavaScript
原文:跟着9张思维导图学习JavaScript 学习的道路就是要不断的总结归纳,好记性不如烂笔头,so,下面将 po 出我收集的 9 张 JavaScript相关的思维导图(非原创). 思维导图小ti ...
-
Python 的 14 张思维导图汇总
本文主要涵盖了 Python 编程的核心知识(暂不包括标准库及第三方库,后续会发布相应专题的文章). 首先,按顺序依次展示了以下内容的一系列思维导图:基础知识,数据类型(数字,字符串,列表,元组,字典 ...
-
【转载】一文总结学习 Python 的 14 张思维导图
本文主要涵盖了 Python 编程的核心知识(暂不包括标准库及第三方库,后续会发布相应专题的文章). 首先,按顺序依次展示了以下内容的一系列思维导图:基础知识,数据类型(数字,字符串,列表,元组,字典 ...
-
一文总结学习 Python 的 14 张思维导图
本文主要涵盖了 Python 编程的核心知识(暂不包括标准库及第三方库,后续会发布相应专题的文章). 首先,按顺序依次展示了以下内容的一系列思维导图:基础知识,数据类型(数字,字符串,列表,元组,字典 ...
-
跟着9张思维导图学习Javascript js 关键字和保留字 css3中的BFC,IFC,GFC和FFC
跟着9张思维导图学习Javascript 学习的道路就是要不断的总结归纳,好记性不如烂笔头,so,下面将 po 出我收集的 9 张 javascript 相关的思维导图(非原创). 思维导图小ti ...
-
跟着9张思维导图学习Javascript
学习的道路就是要不断的总结归纳,好记性不如烂笔头,so,下面将 po 出我收集的 9 张 javascript 相关的思维导图(非原创). 思维导图小tips: 思维导图又叫心智图,是表达发射性思维的 ...
-
跟着 8 张思维导图学习 Javascript
学习的道路就是要不断的总结归纳,好记性不如烂笔头,so,下面将po出8张javascript相关的思维导图. 思维导图小tips:思维导图又叫心智图,是表达发射性思维的有效的图形思维工具 ,它简单却又 ...
随机推荐
-
用keytool工具生成签名文件与获取摘要信息
在Command命命令行模式下: 转到工作目录 执行下面命令: keytool -genkey -v -keystore debug.keystore 最后是生成的文件名,执行该命令后有很多内容要填写 ...
-
【优化AC】建立联系
建立联系 [试题描述] 新学期开始了,不料同学们在假期集体更换了电话,所以同学们只能重新建立联系. 班内一共有n位同学,他们一共建立了m次联系,老师想知道在同学们每次建立完一个联系后,一共有多少对同学 ...
-
cuda(2) 矩阵乘法优化过程
Created on 2013-8-5URL : http://blog.sina.com.cn/s/blog_a502f1a30101mjch.html@author: zhxfl转载请说明出处 # ...
-
jQuery学习-事件之绑定事件(三)
在上一篇<jQuery学习-事件之绑定事件(二)>我们了解了jQuery的dispatch方法,今天我们来学习下handlers 方法: handlers: function( event ...
-
python连接sql server数据库实现增删改查
简述 python连接微软的sql server数据库用的第三方模块叫做pymssql(document:http://www.pymssql.org/en/stable/index.html).在官 ...
-
HDU - 6054 sa + 树状数组套线段树
因为强制在线所以只能转成序列上的问题然后树套树了... #include<bits/stdc++.h> #define LL long long #define LD long doubl ...
-
SSL / TSL 传输加密算法 初解读
SSL(SecureSocketLayer)是netscape公司提出的主要用于web的安全通信标准,.TLS(TransportLayerSecurity)是IETF的TLS工作组在SSL3.0基础 ...
-
es6 对象的扩展
一.现在还有很多浏览器不能直接使用es6语法.特别是手机端的一些低版本的浏览器.都需要用bale转换一下. 但是目前流行的框架中(vue,react,angular).都有自己的脚手架,都能用webp ...
-
mysql ->; 事务&;事务锁_09
事务的特性 redo undo 锁的隔离级别
-
【原创】asp.net内部原理(三) 第三个版本 (最详细的版本)
前言: 今天继续吧这个系列补齐,这几天公司的项目比较忙,回到家已经非常的累了,所以也没顾得上天天来这里分享一些东西和大家一起探讨,但是今天晚上我还是坚持打开电脑,分享一些asp.net生命周期的知识, ...