一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构

栏目: JavaScript · 发布时间: 7年前

内容简介:本文内容讲解的内容:项目地址:

一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构

1.前言

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

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

文章的图文结合版

Vue-family.md

Vue-family.pdf

2. Vue 全家桶

先来张 Vue 全家桶 总图:

一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构

3. Vue

细分如下

源码目录

一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构

源码构建,基于 Rollup

一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构

Vue 本质:构造函数

一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构

数据驱动

一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构

组件化

一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构

深入响应式原理

一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构

编译

一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构

扩展

一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构

4. Vue-Router

一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构

introduction

一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构

路由注册

一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构

VueRouter 对象

一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构

matcher

一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构

路径切换

一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构

5. Vuex

一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构

introduction

一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构

Vuex 初始化

一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构

API

一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构

插件

一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构

6. 已完成与待完成

已完成:

  • 思维导图

待完成:

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

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

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

7. 总结

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

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

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

笔者文章常更地址:

8. 最后

传承至善

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

参考开源项目:

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

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

一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。

电脑报(上下册)

电脑报(上下册)

电脑报社 / 西南师范大学出版社 / 2006-12-01 / 45.00元

全套上、下两册,浓缩2006年电脑报精华文章。附录包含70余篇简明IT应用指南,覆盖软件、硬盘、数码、网络四大领域。配赠权威实用的2006-2007中国计算机年鉴DVD光盘,近1.4GB海量信息与资源超值奉献。8大正版超值软件,涵盖系统维护、系统安全、办公应用、多媒体娱乐等四大领域。微软、腾讯、友立等知名厂商,新年献礼。提供2006-2007全系列硬件、数码产品资讯,兼具知识性与资料性。官方网站全......一起来看看 《电脑报(上下册)》 这本书的介绍吧!

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具