技术驱动- Vue.js 源码（一）

背景

本来并不是技术科班出身的我，是在泥地里摸爬滚打一年后才算入门前端，我都时刻谨记“纸上得来终觉浅，绝知此事要躬行。”，做为一名合格的键盘侠，只有一切落到键盘上，才会有所收获嘛。

前几天钉钉提示我入职一周年，再一次让我感觉到时间过得好快，就是在咱们程序员的指尖溜走的。

那么回顾这一年，对Vue.js更加熟悉，也入门了React + TypeScript。本着饭要一口一口的吃的中心思想，如今就鞭打，哦不，鞭策本身更加深刻学习Vue.js的原理部分来更完全的掌握它。

还等什么，快开始吧

声明： 本系列文章主要是参考Vue.js 技术揭秘来进行学习，属于自我学习笔记。

学习结构以下图所示⬇️(嘿，摸摸党直接摸来用上了...)

上菜

关于Flow先无论了，毕竟和我以前使用的TS似曾相识，从源码目录设计开始吧。

源码目录设计

主要分析src目录下的内容

compiler        # 编译相关
core            # 核心代码 
platforms       # 不一样平台的支持
server          # 服务端渲染
sfc             # .vue 文件解析
shared          # 共享代码
复制代码

compiler
众所周知，Vue 2.x的有一个大的改进就是有了Virtual Dom，而Virtual Dom是由Render Function生成的。因此咱们日常写的template，而后编译成Render Function的相关逻辑就在compiler之中了。

core
顾名思义就是核心目录了，分为

components      # 内置组件
global-api      # 全局方法api
instance        # 事件，实例化，观察者，生命周期以及渲染辅助函数
observer        # 响应式
util            # 工具方法
vdom            # 虚拟dom
复制代码

platforms
分为web和weex两个平台，存放一些和平台相关代码，好比compiler，runtime，server，util等等。platform 是入口文件，从不一样平台入口就能编译出不一样的Vue.js。

server
服务端渲染，是跑在服务端的Node.js，和跑在浏览器端的代码仍是有很大差别化的。

服务端渲染主要的工做是把组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将静态标记"混合"为客户端上彻底交互的应用程序。

sfc
把 .vue 文件内容解析成一个 JavaScript 的对象。

shared
这里定义的工具方法都是会被浏览器端和服务端所共享的。

总结

分析后能够看出，Vue.js 的功能模块拆分的很是清楚，相关的逻辑放在一个独立的目录下维护，而且把复用的代码也抽成一个独立目录。利于后期的代码的阅读和维护。