什么是flow?vue中为何用flow？

flow是一个对js进行静态类型检查的工具，同作用的还有ts。js是一门弱类型语言，比如在c语言中定义一个变量会用关键字同时规定这个变量的类型如： int  x(定义整型)、float y(定义浮点型)；但是js不一样，js定义变量都是通过var关键字，通过赋值来规定这个变量的类型。因此js虽然很灵活，但是同时也很容易写出非常隐蔽的隐患代码，而编译时根本不会报错。因此Vue在做2.0版本重构的时候，在es2015的基础上，引入了flow做静态类型检查，之所以选择flow而不是其他的工具是因为babel和eslint都有对应的flow插件用以支持语法。

flow进行类型检查的方式？

1、类型推断

这个时候通过flow对这个函数进行类型检查就会报错，因为split是字符串的方法，这里的参数推断是传一个字符串，可是在调用splitStr方法的时候传的参数是数字11，不符合要求。

2、类型注释

类型注释需要给a赋值一个数字

flow的基本使用步骤

flow的官网地址是：https://flow.org

1、创建package.json文件与下载flow包

创建package.json

下载flow包

2、编写js代码，并且加入// @flow头

通过注释来指定变量类型

3、修改package.json文件并创建.flowconfig文件

在script中添加flow配置项

通过npm run init来创建.flowconfig文件

创建的.flowconfig文件

4、执行flow类型检查

报错显示需要数字类型传递的却是字符串

flow配合babel进行使用

flow为什么要配合babel进行使用呢？这是因为我们直接写flow的类型注释这些语句用flow进行检查是没问题的，但是代码在运行时是会报错的，所以必须通过babel对代码进行转换

1、下载babel相关插件

下载babel-cli和babel-preset-flow

2、配置package.json文件

配置build命令

3、配置.babelrc文件和执行打包

配置.babelrc文件

通过npm run build打包

会自动生成一个dist文件夹里面有一个index.js文件，是对src/index.js文件转码来的，可以发现没有了flow的类型注释