vue源码解读-Flow
版本基于2.5.17-beta.0
在阅读源码之前建议大家先了解下Flow
Flow 是 facebook 出品的 JavaScript 静态类型检查工具。Vue.js 的源码利用了 Flow 做了静态类型检查,所以了解 Flow 有助于我们阅读源码
这里简单的介绍下Flow
Flow 的工作方式
类型推断:通过变量的使用上下文来推断出变量类型,然后根据这些推断来检查类型。
类型注释:事先注释好我们期待的类型,Flow 会基于这些注释来判断。
类型推断
function split(str) { return str.split('') } split(11)
Flow 检查上述代码后会报错,因为函数 split 期待的参数是字符串,而我们输入了数字。
类型注释
添加类型注释可以提供更好更明确的检查依据
/*@flow*/ function test(x: number, y: number): number { return x + y } test('str', 0)
因为函数参数的期待类型为数字,而我们提供了字符串。flow会报错
flow中对数组,函数,类和对象都能添加类型注释
数组
/*@flow*/ var arr: Array<number> = [1, 2, 3] arr.push('str')
类和对象
/*@flow*/ class Person { constructor(name: string, age: string | number) { this.name= name this.age= age this.sex= false }} var per: Person = new Person('xiaoli', 4) var obj: { arr: Array<string>, per: Person} = { arr: ['hello'] per: new Person('hello', 3) }
想到数据类型大家当然忘不了 null, undefined
如果先让任意类型可以是 null 或者 undefined 则需要写成 ?T 的格式即可,注意T就是类型
/*@flow*/ var age: ?number = null age可以为数字或者 null
相关推荐
KaiZhaoKZ 2020-05-25
WeiHHH 2020-02-23
wellfly 2020-02-12
qingjiuquan 2014-05-15
gavinvong 2019-11-04
lovetg0 2019-10-31
89367161 2019-10-19
YarnSup 2019-09-12
masternan 2014-08-08
DCDLIN 2019-07-12
ArthursL 2019-06-30
NorthCityTime 2015-08-27
yulin 2019-06-30
瞌睡虫 2014-05-15
feinifi 2014-03-26
MayMatrix 2013-10-23
yangxiaobo 2019-06-28
xxuncle 2019-06-28
liwenbocsu 2019-06-28