vue源码学习——认识flow

什么是flow？

flow是Facebook出品的静态类型检查工具（vue.js 的源码就是利用了flow做静态类型检查）

为什么用flow？

1. 因为JavaScript是一种动态类型语言，灵活性强，但是过于灵活会带来一些问题，很容易写出非常隐蔽的隐患代码，没有明显的语法错误编译阶段可能不会报错，但是在运行阶段会出现各种bug。
2. 类型检查就是在编译阶段发现由类型错误引起的bug，不影响代码的运行，使得编写JavaScript具有和编写Java等强类型语言相近的体验
3. vue.js 2.0在ES6的基础上，除了ESlint保证代码风格外，引用了flow做静态类型检查，因为Babel和ESLint都有对应的Flow插件以支持语法，可以完全沿用现有的构建配置，非常小成本的改动就可以拥有静态类型检查的能力

安装使用flow

1. npm i -g flow-bin 安装flow
2. flow init 初始化生成.flowconfig文件
   .flowconfig文件如下： （配置一些不做类型检查的问价和做类型检查的文件等等）

[declarations]
[include]
[ignore]
[untyped]
[libs]
[lints]
[options]
[version]

flow静态类型检查工作方式？

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

function strSplit (str) {
	str.split(' ')
}
strSplit(11)
// 从上下文可以推断出传入参数应该是一个String类型，但是传入的是Number类型，所以在编译的时候就会报错。

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

/*@flow*/
function strSplit (str: string) {
	str.split(' ')
}

/*@flow*/这个标记表示该文件会进行类型检查

flow怎么识别引用的第三方库，或者自定义的类型呢？

flow提出了一个libdef的概念，可以用来识别这些第三方库或者自定义类型。

vue.js源码中的自定义类型

vue.js源码中的自定义类型主要在flow目录下：

（类似Flow的工具还有Typescript）