vue源码学习——认识flow

红太狼 2023-06-27 03:51 68阅读 0赞

## 什么是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类型，所以在编译的时候就会报错。

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

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

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

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

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

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

vue.js源码中的自定义类型主要在flow目录下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzU3MjkzNw_size_16_color_FFFFFF_t_70]  
（类似Flow的工具还有Typescript）

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzU3MjkzNw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200103110148635.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzU3MjkzNw==,size_16,color_FFFFFF,t_70