Vue技术分析

图片解析

FLOW介绍

• Flow 是 facebook 出品的 JavaScript 静态类型检查工具。Vue.js 的源码利用了 Flow 做了静态类型检查，所以了解 Flow 有助于我们阅读源码。

FLOW的作用

• JavaScript是一门动态类型语言，很灵活，容易写出有隐患的代码，在编译期能够编译通过，在运行期间出现BUG
• 类型检查，就是在编译期尽早发现（由类型错误引起的）bug，又不影响代码运行（不需要运行时动态检查类型），使编写 JavaScript 具有和编写 Java 等强类型语言相近的体验
• 静态类型检查
• Babel 和 ESLint 都有对应的 Flow 插件以支持语法，完全沿用现有的构建配置，非常小成本的改动就可以拥有静态类型检查的能力

FLOW的工作机制

类型检查的两种方式：

• 类型推断：通过变量的使用上下文来推断出变量类型，然后根据这些推断来检查类型
• 类型注释：事先注释好我们期待的类型，Flow 会基于这些注释来判断

类型推断

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

通过代码，分割字符串，那么自动推断出必须是string类型

类型注释

/*@flow*/
function add(x, y){
  return x + y
}
add('Hello', 11)
//由于没有类型注释，因此add方法的参数可以是字符串或者数字

/*@flow*/

function add(x: number, y: number): number {
  return x + y
}
add('Hello', 11)
//编译报错，因为已经加了类型注释，参数必须是number类型

//数组
/*@flow*/
var arr: Array<number> = [1, 2, 3]
arr.push('Hello')
//编译报错，因为已经加了类型注释，添加数组的元素必须是number类型

//类和对象
/*@flow*/
class Bar {
  x: string;           // x 是字符串
  y: string | number;  // y 可以是字符串或者数字
  z: boolean;
  constructor(x: string, y: string | number) {
    this.x = x
    this.y = y
    this.z = false
  }
}
var bar: Bar = new Bar('hello', 4)
var obj: { a: string, b: number, c: Array<string>, d: Bar } = {
  a: 'hello',
  b: 11,
  c: ['hello', 'world'],
  d: new Bar('hello', 3)
}
// 类的类型注释格式如上，可以对类自身的属性做类型检查，也可以对构造函数的参数做类型检查。这里需要注意的是，属性 y 的类型中间用 | 做间隔，表示 y 的类型即可以是字符串也可以是数字。
// 对象的注释类型类似于类，需要指定对象属性的类型。

//Null
/*@flow*/
var foo: ?string = null
//等等

FLOW在VUE中的应用

• 在 Vue.js 的主目录下有 .flowconfig 文件， 它是 Flow 的配置文件，感兴趣的同学可以看官方文档。这其中的 [libs] 部分用来描述包含指定库定义的目录，默认是名为 flow-typed 的目录。
• 这里 [libs] 配置的是 flow，表示指定的库定义都在 flow 文件夹内。我们打开这个目录，会发现文件如下：

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

使用FLOW的好处

• 有利于大型项目源码的开发和维护
• 与之相对的还有TypeScript