总结Vue | Vue-Router | Vuex 源码与架构要点思维导图 ╰+哭是因爲堅強的太久メ 2021-07-04 21:12 376阅读 0赞 ## 1.前言 ## 本文内容讲解的内容:**一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构**。 ## 2. Vue 全家桶 ## 先来张 Vue 全家桶 总图预览: ![在这里插入图片描述][2019092015453341.png] Vue 全家桶总图 - 详细图: ![在这里插入图片描述][20190920154725253.jpg] ## 3. Vue ## 细分如下 ### 源码目录 ### ![在这里插入图片描述][20190920154840850.png] ### 源码构建,基于 Rollup ### ![在这里插入图片描述][20190920154917279.png] ### Vue 本质:构造函数 ### ![在这里插入图片描述][20190920154946995.png] ### 数据驱动 ### \[外链图片转存失败(img-bCy590Ai-1568957590888)(./vue/4.png)\] ![在这里插入图片描述][20190920155020636.png] ### 组件化 ### ![在这里插入图片描述][2019092015505221.png] ### 深入响应式原理 ### ![在这里插入图片描述][20190920155152927.png] ### 编译 ### ![在这里插入图片描述][20190920155219589.png] ### 扩展 ### ![在这里插入图片描述][20190920155247475.png] ## 4. Vue-Router ## Vue-Router 预览图: ![在这里插入图片描述][20190920155329231.png] Vue-Router 详细图: ![在这里插入图片描述][20190920155352280.png] ### introduction ### ![在这里插入图片描述][20190920155421165.png] ### 路由注册 ### \[外链图片转存失败(img-XmMM58ne-1568957590890)(./vue-router/2.png)\] ![在这里插入图片描述][20190920155439830.png] ### VueRouter 对象 ### \[外链图片转存失败(img-7bCN9RHy-1568957590890)(./vue-router/3.png)\] ![在这里插入图片描述][20190920155452457.png] ### matcher ### ![在这里插入图片描述][2019092015550728.png] ### 路径切换 ### ![在这里插入图片描述][20190920155522708.png] ## 5. Vuex ## Vuex 预览图: ![在这里插入图片描述][2019092015560030.png] Vuex 详细图: ![在这里插入图片描述][20190920155623510.png] ### introduction ### ![在这里插入图片描述][20190920155700405.png] ### `Vuex` 初始化 ### ![在这里插入图片描述][20190920155725631.png] ### API ### ![在这里插入图片描述][20190920155908236.png] ### 插件 ### ![在这里插入图片描述][20190920155928849.png] ## 6. 已完成与待完成 ## **已完成** * 思维导图 **待完成** * 继续完善 思维导图 * 添加 流程图 因为该项目都是业余时间做的,笔者能力与时间也有限,很多细节还没有完善。 如果你是大神,或者对 `vue` 源码有更好的见解,**欢迎提交 issue ,大家一起交流学习,一起打造一个像样的 讲解 Vue 全家桶源码架构 的开源项目**。 ## 7. 总结 ## 以上内容是笔者最近学习 `Vue` 源码时的收获与所做的笔记,本文内容大多是开源项目 **Vue.js 技术揭秘** 的内容,只不过是以思维导图的形式来展现,内容有省略,还加入了笔者的一点理解。 笔者之所以采用思维导图的形式来记录所学内容,是因为思维导图更能反映知识体系与结构,更能使人形成完整的知识架构,知识一旦形成一个体系,就会容易理解和不易忘记。 > **注意**:文章的图片可能上传时会经过压缩,可能有点模糊,不过本文用到的 所有 **超清图片** 都已经放在 [github][] 上,而且还有 **pdf 格式、markdown 语法、思维导图 的原文件**,自己可以根据 **思维导图原文件** 导出相应的超清图片。 [2019092015453341.png]: /images/20210704/37221e7800704cb0bfeb7d00b7294510.png [20190920154725253.jpg]: /images/20210704/97bbebe95cf34f75bd89b95fe473c1ad.png [20190920154840850.png]: /images/20210704/c0af317505704e168dc92e4a72aa325e.png [20190920154917279.png]: /images/20210704/371d9f4ed8244d8ca072046622d28a34.png [20190920154946995.png]: /images/20210704/c6f8bb66fee0408ba70a2553abdc0938.png [20190920155020636.png]: /images/20210704/090cc8872bbd4cea896d0176981ed865.png [2019092015505221.png]: /images/20210704/b31eec7c9c0941438df0faa857b6cdcd.png [20190920155152927.png]: /images/20210704/6ae773c2a3ff469182a7864be113ad5b.png [20190920155219589.png]: /images/20210704/0ac4fe9125c94d7f82d13ec725dd0e5c.png [20190920155247475.png]: /images/20210704/a56f3fac81644bd1a5dca82f8c7f1497.png [20190920155329231.png]: /images/20210704/39ee6f472f0d41a9bd9f6fb4d09fbd04.png [20190920155352280.png]: /images/20210704/cb687e7cd6de4e16a488b7eb6f8b25f2.png [20190920155421165.png]: /images/20210704/c933a8d67b05446eaca78d9b58ac30da.png [20190920155439830.png]: /images/20210704/63acef8414df403b95454c3389c5c40e.png [20190920155452457.png]: /images/20210704/8585bb4f82684956be35a04cdd52f942.png [2019092015550728.png]: /images/20210704/7458986d27874a23ac10ce4af3c04d37.png [20190920155522708.png]: /images/20210704/63b1ee9b4f2a400082c75597de1ac457.png [2019092015560030.png]: /images/20210704/f443ab3068644f70b2572e095a7d84ba.png [20190920155623510.png]: /images/20210704/180b146728734034bf1b5b18eac5d0d5.png [20190920155700405.png]: /images/20210704/d9b9a04304d44477a0b265355228fdb6.png [20190920155725631.png]: /images/20210704/e76017d3efeb4ef6b4ac54a8cffd2a86.png [20190920155908236.png]: /images/20210704/d1d37c66de5d4fbfa0f0d89ba72cf813.png [20190920155928849.png]: /images/20210704/f8ea778a2aa241c8927909e551db5357.png [github]: https://github.com/biaochenxuying/vue-family-mindmap
还没有评论,来说两句吧...