vue源码解读-Flow

Jacendfeng 发布于2019-08-26 13:24 / 1425人阅读

摘要：版本基于在阅读源码之前建议大家先了解下是出品的静态类型检查工具。的源码利用了做了静态类型检查，所以了解有助于我们阅读源码这里简单的介绍下的工作方式类型推断通过变量的使用上下文来推断出变量类型，然后根据这些推断来检查类型。

版本基于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 = [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, per: Person} = {
arr: ["hello"]
per: new Person("hello", 3)
}

想到数据类型大家当然忘不了 null， undefined
如果先让任意类型可以是 null 或者 undefined 则需要写成 ?T 的格式即可，注意T就是类型

/*@flow*/
var age: ?number = null
age可以为数字或者 null

GPU云服务器云服务器源码解读 webrtc源码解读 webrtc fec源码解读 js v8源码解读

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108744.html

解读Vue.use()源码

摘要：的作用官方文档的解释安装插件。下面展示源码源码中采用了的语法。语法，官方解释是简单的意思就是是代码的静态类型检查工具。官网链接使用的好处就是在编译期对代码变量做类型检查，缩短调试时间，减少因类型错误引起的。此时方法内的指向对象。 Vue.use() vue.use()的作用：官方文档的解释：安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一...

funnyZhang 2019-08-23 11:42 评论0 收藏0
vue源码解读-目录结构

摘要：目录结构构建相关的文件，一般情况下我们不需要动钩子别名配置目录结构 ├── scripts ------------------------------- 构建相关的文件，一般情况下我们不需要动│ ├── git-hooks ------------------------- git钩子│ ├── alias.js -------------------------- 别名配...

philadelphia 2019-08-23 13:51 评论0 收藏0
vue 源码学习（一）目录结构和构建过程简介

摘要：框架使用了作为类型检查，来保证项目的可读性和维护性。的主目录下有的配置文件，还有目录，指定了各种自定义类型。表示构建出来的文件遵循规范。 Flow vue框架使用了Flow作为类型检查，来保证项目的可读性和维护性。vue.js的主目录下有Flow的配置.flowconfig文件，还有flow目录，指定了各种自定义类型。在学习源码前可以先看下Flow的语法官方文档目录结构 vue....

lavnFan 2019-08-23 14:36 评论0 收藏0
Vue源码之目录结构

摘要：运行时用来创建实例渲染并处理虚拟等的代码。基本上就是除去编译器的其它一切。版本可以通过标签直接用在浏览器中。为这些打包工具提供的默认文件是只有运行时的构建。为浏览器提供的用于在现代浏览器中通过直接导入。 Vue版本：2.6.9 源码结构图 ├─ .circleci // 包含CircleCI持续集成/持续部署工具的配置文件 ├─ .github ...

freewolf 2019-08-23 16:22 评论0 收藏0