vue源码学习的前期准备工作

类型检查工具Flow

Flow是Facebook出品的静态类型检查工具。

Flow的工作方式

通常类型检查分成 2 种方式：

• 类型推断：通过变量的使用上下文来推断出变量类型，然后根据这些推断来检查类型。

• 类型注释：事先注释好我们期待的类型，Flow 会基于这些注释来判断。

在vue源码里找Flow

在Vue的主目录下，有一个 .flowconfig 文件，这是Flow的配置文件，其中[libs]按照官方文档是来描述指定库定义的目录，可以看出配置的是flow。
接着我们可以找到flow文件夹，可以看到文件如下：

flow
├── compiler.js        # 编译相关
├── component.js       # 组件数据结构
├── global-api.js      # Global API 结构
├── modules.js         # 第三方库定义
├── options.js         # 选项相关
├── ssr.js             # 服务端渲染相关
├── vnode.js           # 虚拟 node 相关

在阅读源码的过程中，如果对于某个自定义类型的数据结构有疑问，可以翻阅对应的文件部分进行查阅

同时，在查阅Flow的资料时，发现很多同行认为TypeScript比Flow更先进，对于TypeScript可以在以后进行深入学习。

vue源码目录结构

vue的源码都在src的目录下，结构如下：

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

compiler

编译相关。具有把模板解析成ast语法树，对ast语法树的优化，代码生成等功能。

cores

vue的核心代码就在这里，包括我们熟知的全局API、Vue实例化、虚拟DOM、工具函数等等。
这里是vue的灵魂。s

platform

我们已经知道阿里开发了weex，用来实现vue跑在原生客户端上。
platform 是 Vue.js 的入口，2 个目录代表 2 个主要入口，分别打包成运行在 web 上和 weex 上的 Vue.js。

server

从vue2.0开始支持了服务端渲染，主要的工作是把组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将静态标记”混合”为客户端上完全交互的应用程序。

sfc

这个目录下的代码逻辑会把 .vue 文件内容解析成一个 JavaScript 的对象。

shared

Vue.js 会定义一些工具方法，这里定义的工具方法都是会被浏览器端的 Vue.js 和服务端的 Vue.js 所共享的。