vue 导出pdf_一张思维导图辅助你深入了解 Vue | VueRouter | Vuex 源码架构

4c23db01c61c2114787ec0acd432458f.png
vue

1.前言

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

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

2. Vue 全家桶

先来张 Vue 全家桶 总图:

e0798e1d9fb41e7673a7bf1281f2613e.png

3. Vue

细分如下

源码目录

4522267741ee1403fcd344a6c061afcc.png

源码构建,基于 Rollup

433843cc0591eef69c0d9f2e04281c3d.png

Vue 本质:构造函数

73310fe9b0425d9429b82793b83e2c9b.png

数据驱动

321c8fc29d4872dfb152015799b41913.png

组件化

42b5ccd0dabea55eaa34bedf1382d7f7.png

深入响应式原理

92bf8db7164621c1c3e91a8e0c420d77.png

编译

13395b81e2d198bc077579f71f443821.png

扩展

fdec3e9edcf82d832fdbfde7d84fa913.png

4. Vue-Router

Vue-Router 总图

99ba56732b59a8557b9354a37cffb85d.png

introduction

5be20655be3eec66be0ec6d9ebd24117.png

路由注册

8a94bb12cfc6bae5fbad01add87cf0f7.png

VueRouter 对象

6699f4601ea096cd887a0e6e29a4e811.png

matcher

eb44d6b9b31984e02a78018b269fcc9a.png

路径切换

7c9e65560f212dd5440c43a302e0cc56.png

5. Vuex

99443f27e60c3a4a4a909173710e7cc1.png

introduction

cb5d3dc917f790b4e1981bf709354b56.png

Vuex 初始化

bfad5e79ba8305721ea5e553a5a59dba.png

API

1cbb2160a1399bae1304b78309110873.png

插件

640007db0adf8ced424fbbe547fe6fd6.png

6. 已完成与待完成

已完成

  • 思维导图

待完成

  • 继续完善 思维导图

  • 添加 流程图

因为笔者能力与时间有限,很多细节还没有完善。

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

7. 总结

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

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

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

笔者文章常更地址:

1. github
2. 全栈修炼

8. 最后

传承至善

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

参考开源项目:

  1. https://github.com/ustbhuangyi/vue-analysis

  2. https://github.com/HcySunYang/vue-design

关注公众号并回复 福利 可领取免费学习资料,福利详情请猛戳:  Python、Java、Linux、Go、node、vue、react、javaScript

234c48d8dd8a591a82e4f71bb5e4752c.png
全栈修炼
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值