版本基于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