阅读 528

迫于菜🐶 - 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 的功能模块拆分的非常清楚,相关的逻辑放在一个独立的目录下维护,并且把复用的代码也抽成一个独立目录。利于后期的代码的阅读和维护。

关注下面的标签,发现更多相似文章
评论