版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_34255080/article/details/83546197
需要了解
RollUp
Flow
RollUp
Rollup是一个js的模块打包器，可以将小块代码编译成大块复杂代码，那为什么这样做呢，为了降低开发问题时候的复杂度
Tree-shaking（摇树优化）
除了使用ES6的模块外，Rollup还能静态分析代码中的import
// 使用 ES6 import 语句导入(import) ajax 函数
import { ajax } from 'utils';
var query = 'Rollup';
// 调用 ajax 函数
ajax( 'https://api.example.com?search=' + query ).then( handleResponse );
Vue 源码目录
├── scripts ------------------------------- 构建相关的文件，一般情况下我们不需要动
│ ├── git-hooks ------------------------- 存放git钩子的目录
│ ├── alias.js -------------------------- 别名配置
│ ├── config.js ------------------------- 生成rollup配置的文件
│ ├── build.js -------------------------- 对 config.js 中所有的rollup配置进行构建
│ ├── ci.sh ----------------------------- 持续集成运行的脚本
│ ├── release.sh ------------------------ 用于自动发布新版本的脚本
├── dist ---------------------------------- 构建后文件的输出目录
├── examples ------------------------------ 存放一些使用Vue开发的应用案例
├── flow ---------------------------------- 类型声明，使用开源项目 [Flow](https://flowtype.org/)
├── packages ------------------------------ 存放独立发布的包的目录
├── test ---------------------------------- 包含所有测试文件
├── src ----------------------------------- 这个是我们最应该关注的目录，包含了源码
│ ├── compiler -------------------------- 编译器代码的存放目录，将 template 编译为 render 函数
│ ├── core ------------------------------ 存放通用的，与平台无关的代码
│ │ ├── observer ---------------------- 响应系统，包含数据观测的核心代码
│ │ ├── vdom -------------------------- 包含虚拟DOM创建(creation)和打补丁(patching)的代码
│ │ ├── instance ---------------------- 包含Vue构造函数设计相关的代码
│ │ ├── global-api -------------------- 包含给Vue构造函数挂载全局方法(静态方法)或属性的代码
│ │ ├── components -------------------- 包含抽象出来的通用组件
│ ├── server ---------------------------- 包含服务端渲染(server-side rendering)的相关代码
│ ├── platforms ------------------------- 包含平台特有的相关代码，不同平台的不同构建的入口文件也在这里
│ │ ├── web --------------------------- web平台
│ │ │ ├── entry-runtime.js ---------- 运行时构建的入口，不包含模板(template)到render函数的编译器，所以不支持 `template` 选项，我们使用vue默认导出的就是这个运行时的版本。大家使用的时候要注意
│ │ │ ├── entry-runtime-with-compiler.js -- 独立构建版本的入口，它在 entry-runtime 的基础上添加了模板(template)到render函数的编译器
│ │ │ ├── entry-compiler.js --------- vue-template-compiler 包的入口文件
│ │ │ ├── entry-server-renderer.js -- vue-server-renderer 包的入口文件
│ │ │ ├── entry-server-basic-renderer.js -- 输出 packages/vue-server-renderer/basic.js 文件
│ │ ├── weex -------------------------- 混合应用
│ ├── sfc ------------------------------- 包含单文件组件(.vue文件)的解析逻辑，用于vue-template-compiler包
│ ├── shared ---------------------------- 包含整个代码库通用的代码
├── package.json -------------------------- 不解释
├── yarn.lock ----------------------------- yarn 锁定文件
├── .editorconfig ------------------------- 针对编辑器的编码风格配置文件
├── .flowconfig --------------------------- flow 的配置文件
├── .babelrc ------------------------------ babel 配置文件
├── .eslintrc ----------------------------- eslint 配置文件
├── .eslintignore ------------------------- eslint 忽略配置
├── .gitignore ---------------------------- git 忽略配置
Vue 不同构建输出
vue使用Rollup构建，有三种输出方式，UMD，CommonJS，ESModule，三种构建配置入口相同web/entry-runtime.js，但是输出格式format不同，cjs，es，umd，每种模块形式又分为运行版和完成版
完整版比运行版多一个compiler（观察者），作用为编译器代码的存放目录，将template编译为render，运行版+Compiler = 完整版
Flow
Flow 是Facebook出品的JS静态类型检查工具，Vue.js源码就是利用Flow做静态类型检查。
Flow是动态类型语言，由于js是动态类型语言，很灵活，但是过于灵活容易写出隐蔽的错误代码。所以类检查是当前动态类型语言的发展趋势。
Flow的工作方式
- 类型推断：通过变量的使用上下文来推断出变量的类型，根据推断来检查类型
- 类型注释：事先注释好我们需要的类型，FLow会基于注释推断
类型推断
不需要任何代码修改即可进行类型检查，会自动推断变量类型。
function split(str) {
return str.split(' ')
}
split(11)
在Flow检查后，会报错，因为split需要的是字符串
类型注释
不需要编写类型注释就能过去反馈。
/*@flow*/
function add(x, y){
return x + y
}
add('Hello', 11)
Flow检查不出错误，但是我们可以通过类型注释来指明期望的类型，类型注释以冒号：开头，可以在函数参数，返回值和变量声明中使用。
/*@flow*/
function add(x: number, y: number): number {
return x + y
}
add('Hello', 11)
这样就可以检查到类型。
数组
/*@flow*/
var arr: Array<number> = [1, 2, 3]
arr.push('Hello')
数组类型注释的格式是Array,T表示数组中每项的数据类型。
类和对象
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
若想用类型T可以为null或undefined，可以写成？T格式：
/*@flow*/
var foo: ?string = null