vue源码学习——认识flow

什么是flow？

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

为什么用flow？ 因为JavaScript是一种动态类型语言，灵活性强，但是过于灵活会带来一些问题，很容易写出非常隐蔽的隐患代码，没有明显的语法错误编译阶段可能不会报错，但是在运行阶段会出现各种bug。 类型检查就是在编译阶段发现由类型错误引起的bug，不影响代码的运行，使得编写JavaScript具有和编写Java等强类型语言相近的体验 vue.js 2.0在ES6的基础上，除了ESlint保证代码风格外，引用了flow做静态类型检查，因为Babel和ESLint都有对应的Flow插件以支持语法，可以完全沿用现有的构建配置，非常小成本的改动就可以拥有静态类型检查的能力 安装使用flow npm i -g flow-bin 安装flow flow init 初始化生成.flowconfig文件
.flowconfig文件如下： （配置一些不做类型检查的问价和做类型检查的文件等等） [declarations] [include] [ignore] [untyped] [libs] [lints] [options] [version] flow静态类型检查工作方式？ 类型推断 通过变量的使用上下文推断出变量类型，然后根据这些推断来检查类型
例子： function strSplit (str) { str.split(' ') } strSplit(11) // 从上下文可以推断出传入参数应该是一个String类型，但是传入的是Number类型，所以在编译的时候就会报错。 类型注释 事先注释好我们期待的类型。Flow会基于这些注释来判断 /*@flow*/ function strSplit (str: string) { str.split(' ') }

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

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

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

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

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

（类似Flow的工具还有Typescript）

作者：小馋猫s

VUE 学习 flow