vue源码解读01——flow

        vue作为一个大型项目，选择了flow作为js静态类型检测工具，由Facebook开源，有兴趣的同学可以去了解下，这里抛砖引玉，有兴趣的同学多多了解下，主要是我自己也是刚刚接触。

        js是动态类型语言，灵活多变是它的优点，但是过于灵活会使我们写出非常隐蔽的隐患代码。可能在编译期都不回报错，但是在运行阶段会有各种各样的问题，而且往往不容易排查。

        个人认为类型检查是当前动态类语言发展的趋势，在编译期尽早发现由类型引发的bug。缺点就是会使语言加重，体验类似于在写java。不过项目越是复杂就越需要通过工具来保证项目的维护性和代码的可读性。

flow的两种类型检查方式：

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

    2、类型注释：事先注释好我们期待的类型，flow会根据我们的注释来进行判断。

类型判断：

/*@flow*/
function test(str) {
  return str.split('')
}
test(11)

这里运行flow就会提示你错误：

Cannot call str.split because property split is missing in Number [1].

     1│ /*@flow*/
     2│ function test(str) {
     3│   return str.split('')
     4│ }
 [1] 5│ test(11)
     6│
Found 1 error

类型注释：

/*@flow*/
function add(x, y) {
  return x + y
}
add('hello', 10)  // hello10

假如我们期待的是输出输入都是数字，那么上面的代码明显不符合我们的期望，而且flow也检测不出来，所以这个时候我们可以这样：

/*@flow*/
function add(x: number, y: number): number {
  return x + y
}
add('hello', 10)  // hello10

这个时候运行flow就会报错了，是这个样子：

Cannot call add with 'hello' bound to x because string [1] is incompatible with number [2].
 [2] 3│ function add(x: number, y: number): number {
     4│     return x + y
     5│ }
 [1] 6│ console.log(add('hello', 10))
     7│
Found 1 error

我们期待的数字，但是出现的是字符串，所以报错。具体语法这里就不解释了，大家可以去flow官网看看。

flow在vue.js中的应用：

        如果我们想用第三方库或者自定义类型，flow还提出了libdef的概念，vue.js也是利用这一概念。

        在vue.js主目录下有.flowconfig文件，它是flow的配置文件，其中的libs是用来描述指定库定义的目录flow。打开flow，详情如下：

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

        vue.js有很多类型定义，在阅读源码想了解某个类型的完整数据结构时，可以回来翻阅这些数据结构的定义。

以上是我对flow的了解，有出错的地方欢迎大家指正，蟹蟹。