Vue.js作为目前最热门最具前景的前端框架之一，其提供了一种帮助我们快速构建并开发前端项目的新的思维模式。我给它的总体评价是“简单却不失优雅，小巧而不乏大匠”，写这本文集也是因为我正好在学习vue源码，所以就想把我的学习过程记录下来，同时也可以给对源码感兴趣的童鞋们一些帮助吧
首先在了解源码之前，我们需要先来学习了解一下Flow
Flow是facebook出品的JavaScript静态类型检查工具。简单的来说，她是对比TypeScript语言的解决方式。
如果童鞋们学过Java、C#这些语言就知道为什么会有Flow的出现了，会出现Flow这类解决方案，来源是因为JavaScript是一种弱（动态）类型的语言，我们知道，弱类型语言里没有像别的语言里出现的int、float这种强类型的定义方式，JS小姑凉是比较听话，温顺，乖巧的，你给她赋上什么样的值，她就会替你变更数据类型，这也是直译式脚本语言的常见特性，优点容易使用，缺点则是会经常因为赋值或传值的类型错误，造成不如预期的后果。所以，动态类型语言就像着需要进行类型检查来避免这样的后果。
类型检查是当前动态类型语言的发展趋势，所谓类型检查，就是在编译期尽早发现（由类型错误引起的）bug，又不影响代码运行，使得JavaScript具有和编写Java等强类型语言相近的体验。
类型判断
类型判断它不需要任何代码修改即可进行类型检查，最小化开发者的工作量。它不会强制你改变开发习惯，因为它会自动推断出变量的类型。这就是所谓的类型推断，Flow 最重要的特性之一。
通过一个简单例子说明一下：
/*@flow*/``
function foo(str) {
return str.split('')
}
foo(11)
Flow会自动检查上述代码，函数foo的参数str希望得到一个字符串，而我们传入了数字，所以类型判断会报错。
类型注释
某些情况下，我们也可以添加类型注释提供更好更明确的检查依据
/*@flow*/
function bar(a) {
return a + 10
}
bar('hello world!')
Flow检查上述代码时检查不出任何错误，因为从语法层面考虑，+即可以用在字符串上，也可以用在数字上，我们并没有明确指出bar()的参数必须为数字。
聪明如你应该会想要用类型来当传参的识别名，容易一眼看出传参要的是什么类型，像下面这样:
function bar(number) {
return number + 10
}
但如果在复合类型的情况，例如这个传参的类型可以是数字类型也可以是布尔类型，你又要如何写得清楚？更不用说如果是个复杂的对象类型时，结构又该如何先确定好？另外还有函数的返回类型又该如何来写？
利用Flow类型的定义方式，来解决这个小案例的问题，可以改写为像下面的代码:
// @flow
function bar(x: number): number {
return x + 10
}
bar('hello world!')
现在Flow 就能检查出错误，因为函数参数的期待类型为数字，而我们提供了字符串。
上面的例子是针对函数的类型注释。接下来我们来看看Flow 能支持的一些常见的类型注释。
（1）原始数据类型
// @flow
function concat(a: string, b: string) {
return a + b;
}
concat("10", 4); // Error!
// @flow
function method(x: number, y: string, z: boolean) {
// ...
}
method(3.14, "hello", true);//No errors!
// @flow
function method(x: Number, y: String, z: Boolean) {
// ...
}
method(new Number("111"), new String("world"), new Boolean(false));//No errors!
（2）类和对象
/*@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的类型即可以是字符串也可以是数字。对象的注释类型类似于类，需要指定对象属性的类型。
如果想了解所有类型注释，请移步Flow 的官方文档。
Flow安装
$mkdir flowtest
$npm install --g flow-bin
$flow init //初始化，创建一个.flowconfig文档
$flow
针对Flow在vscode中报错解决方法
设置中定义
"javascript.validate.enable": false
网友评论