jin5354 / 404forest

个人 Blog,写文做总结。

Home Page:https://www.404forest.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Vue flow: Vue 生态工作机制图解

jin5354 opened this issue · comments

title: Vue flow: Vue 生态工作机制图解
categories:

  • Code
    tags:
  • vue
  • vuex
  • vue-router
    toc: true
    date: 2019-03-20 16:22:10

本文用图梳理了 vue、vue-router、vuex 的工作原理,需配合源码食用。

注:
原始链接: https://www.404forest.com/2019/03/20/vue-flow-vue-ecosystem-mechanism-diagram/
文章备份: #72

深入理解一个框架最好的方法莫过于阅读源码。笔者最近将 vue、vue-router、vuex 的源码过了一遍,小有收获。本篇文章并不会讲解源码,因为网上已经有了多个优秀的源码讲解系列,如 Vue.js 技术揭秘 或者 read-vue-source-code,重复工作并没有什么意义。不过,上述两系列文章讲解细腻篇幅长,容易看了后面忘前面,来来回回找思路,遂整理图解,望能一图流宏观掌控框架机理,想必是极好的。

含有源码内名词,请搭配框架源码或源码解析文章使用。不过,如果是娴熟的 Vue 使用者,想必不看源码也能理解个七七八八 : )。图片较大,需要右键到新窗口查看。

1. vue-router

vue-router

2. vuex

vuex

3. vue

vue-flow

4. 参考资料

  1. vue 源码
  2. vue-router 源码
  3. vuex 源码
  4. Vue.js 技术揭秘
  5. Read Vue Source Code
  6. Vue技术内幕
  7. 现代前端科技解析 —— Virtual DOM
  8. 现代前端科技解析 —— HTML Parser

github 的图片缓存真的不太行啊,怎么图片都只载了一半。