[TOC]
* * * * *
# 1 类型检查目录名称(flow\)
* options.js 构造选项类型属性声明
* component.js vue属性声明
* global-api.js vue扩展api声明
* compiler.js 模板解析编译声明
* vnode.js 虚拟dom节点声明
> 类型检查使用了开源js类型检查工具flow
> 其使用见 [flow facebook的js静态类型检查器](http://blog.jobbole.com/80364/)
> 这里主要根据类型信息，分析**vue相关的属性信息**。
# 2 vue构造参数选项(options.js)
~~~
;component组件构造选项属性信息
declare type InternalComponentOptions = {
_isComponent: true, ;组件标志
parent: Component, ;父级组件
propsData: ?Object, ;引用父级组件数据
_parentVnode: VNode, ;父级节点
_parentListeners: ?Object, ;父级事件监听器
_renderChildren: ?VNodeChildren, ;渲染子节点
_componentTag: ?string, ;组件标签名
render?: Function, ;组件渲染函数
staticRenderFns?: Array<Function> ;组件渲染数组
}
;vue构造参数选项属性信息
declare type ComponentOptions = {
// data VM数据参数
data: Object | Function | void, ;option.data
props?: { [key: string]: PropOptions }, ;option.props
propsData?: ?Object, ;option.propsData
computed?: { ;option.computed
[key: string]: Function | {
get?: Function,
set?: Function,
cache?: boolean
}
},
methods?: { ;option.methods
[key: string]: Function
},
watch?: { ;option.watch
[key: string]: Function | string
},
// DOM 模板DOM参数
el?: string | Element, ;option.el
template?: string, ;option.template
render: () => VNode, ;option.render
staticRenderFns?: Array<() => VNode>, ;option.staticRenderFns
// lifecycle 生命周期钩子
init?: Function, ;init钩子
created?: Function, ;created钩子
beforeMount?: Function, ;beforeMount钩子
mounted?: Function, ;mounted钩子
beforeUpdate?: Function, ;beforeUpdate钩子
updated?: Function, ;updated钩子
// assets 资源注册
directives?: { [key: string]: Object }, ;指令注册
components?: { [key: string]: Class<Component> }, ;组件注册
transitions?: { [key: string]: Object }, ;动画注册
filters?: { [key: string]: Function }, ;过滤器注册
// misc 父级混合信息
parent?: Component, ;父级组件
mixins?: Array<Object>, ;混合信息
name?: string, ;名称信息
extends?: Class<Component> | Object, ;基础vue
delimiters?: [string, string], ;分解符
// private 私有属性
_isComponent?: true,
_propKeys?: Array<string>,
_parentVnode?: VNode,
_parentListeners?: ?{ [key: string]: Function | Array<Function> },
_renderChildren?: ?VNodeChildren
}
;Prop选项属性信息
declare type PropOptions = {
type: Function | Array<Function> | null,
default: any,
required: ?boolean,
validator: ?Function
}
;其中的ComponentOptions是new Vue(options)中的options可选属性组织，
;根据ComponentOptions可以得知Vue构造参数信息
~~~
# 3 Vue核心属性信息(component.js)
~~~
;导入类型属性信息
import type { Config } from '../src/core/config'
import type VNode from '../src/core/vdom/vnode'
import type Watcher from '../src/core/observer/
;查看对应导入类型信息
;Config 配置信息
export type Config = {
optionMergeStrategies: { [key: string]: Function }, ;选项合并函数
silent: boolean, ;警告提醒控制
errorHandler: ?Function, ;错误处理函数
isReservedTag: (x?: string) => boolean, ;保留标签判断
isUnknownElement: (x?: string) => boolean, ;未知元素判断
mustUseProp: (x?: string) => boolean, ;是否使用Prop
_assetTypes: Array<string>, ;资源类型信息
_lifecycleHooks: Array<string>, ;生命周期钩子
_maxUpdateCount: number, ;最大更新次数
_isServer: boolean, ;是否服务器端
_ctors: Array<Function> ;构造函数配置
}
;vnode.js 虚拟dom属性
export default class VNode {
tag: string | void; ;节点标签名称
data: VNodeData | void; ;节点虚拟数据
children: Array<VNode> | void; ;子节点数组
text: string | void; ;节点文本
elm: Node | void; ;节点元素信息
ns: string | void;
context: Component | void;
key: string | number | void;
componentOptions: VNodeComponentOptions | void;
child: Component | void; ;节点子组件
parent: VNode | void; ;父级节点信息
}
;watcher.js 消息订阅器属性信息
export default class Watcher {
vm: Component; ;关联的vue
expression: string; ;监控的表达式
cb: Function; ;刷新函数
id: number; ;watcher.id
deep: boolean;
user: boolean;
lazy: boolean;
dirty: boolean;
active: boolean;
deps: Array<Dep>;
newDeps: Array<Dep>;
depIds: Set;
newDepIds: Set;
getter: Function;
value: any;
}
;Vue核心属性信息
declare interface Component {
// constructor information 构造参数信息
static cid: number; ;uid
static options: Object; ;options参数
// extend extend基础选项
static extend: (options: Object) => Function; ;extend扩展
// assets 资源注册
static directive: (id: string, def?: Function | Object) => Function | Object | void; ;注册的指令
static component: (id: string, def?: Class<Component> | Object) => Class<Component>; ;注册的组件
static transition: (id: string, def?: Object) => Object | void; ;注册的动画
static filter: (id: string, def?: Function) => Function | void; ;注册的过滤器
// public properties 共有属性
$el: Element | void; ;挂载元素
$data: Object; ;数据
$options: ComponentOptions; ;构造参数
$parent: Component | void; ;父级vue
$root: Component; ;所属根vue
$children: Array<Component>; ;子vue数组
$refs: { [key: string]: Component | Element | Array<Component | Element> | void }; ;引用属性
$slots: { [key: string]: Array<VNode> }; ;slots
$isServer: boolean; ;isserver
// public methods 共有方法
$mount: (el?: Element | string, hydrating?: boolean) => Component; ;挂载到元素
$forceUpdate: () => void; ;强制刷新
$destroy: () => void; ;销毁
$watch: (expOrFn: string | Function, cb: Function, options?: Object) => Function; ;注册watch
$on: (event: string, fn: Function) => Component; ;注册事件
$once: (event: string, fn: Function) => Component; ;注册事件
$off: (event?: string, fn?: Function) => Component; ;注销事件
$emit: (event: string, ...args: Array<any>) => Component; ;触发事件
$nextTick: (fn: Function) => void; ;异步调用
$createElement: (
tag?: string | Component,
data?: Object,
children?: VNodeChildren,
namespace?: string
) => VNode; ;创建虚拟节点
// private properties 私有属性
_uid: number;
_isVue: true;
_self: Component;
_renderProxy: Component;
_renderParent: ?Component;
_watcher: Watcher;
_watchers: Array<Watcher>;
_data: Object;
_events: Object;
_isMounted: boolean;
_isDestroyed: boolean;
_isBeingDestroyed: boolean;
_vnode: ?VNode;
_staticTrees: ?Array<VNode>;
// private methods 私有方法
// lifecycle 生命周期方法
_init: Function;
_mount: (el?: Element | void, hydrating?: boolean) => Component;
_update: (vnode: VNode, hydrating?: boolean) => void;
_updateListeners: (listeners: Object, oldListeners: ?Object) => void;
_updateFromParent: (
propsData: ?Object,
listeners: ?{ [key: string]: Function | Array<Function> },
parentVnode: VNode,
renderChildren: ?VNodeChildren
) => void;
// rendering 渲染接口方法
_render: () => VNode;
__patch__: (a: Element | VNode | void, b: VNode) => Element;
// renderElementWithChildren
_h: (
vnode?: VNode,
children?: VNodeChildren
) => VNode | void;
// renderElement
_e: (
tag?: string | Component | Object,
data?: Object,
namespace?: string
) => VNode | void;
// renderText
_t: (
str?: string
) => string;
// renderStaticTree
_m: (
index?: number
) => Object | void;
// toString
_s: (value: any) => string;
// resolveFilter
_f: (id: string) => Function;
// renderList
_l: (
val: any,
render: Function
) => ?Array<VNode>;
// apply v-bind object
_b: (vnode: VNodeWithData, value: any) => void;
// allow dynamic method registration 注册的方法
[key: string]: any
}
~~~
# 4 Vue扩展属性信息(global-api.js)
~~~
;Vue扩展的接口
declare interface GlobalAPI {
cid: number; ;uid标志
options: Object; ;构造选项
config: Config; ;配置参数
util: Object; ;工具方法
;扩展注册的接口
extend: (options: Object) => Function;
set: (obj: Object, key: string, value: any) => void;
delete: (obj: Object, key: string) => void;
nextTick: (fn: Function, context?: Object) => void;
use: (plugin: Function | Object) => void;
mixin: (mixin: Object) => void;
compile: (template: string) => { render: Function, staticRenderFns: Array<Function> };
;扩展注册的资源
directive: (id: string, def?: Function | Object) => Function | Object | void;
component: (id: string, def?: Class<Component> | Object) => Class<Component>;
transition: (id: string, def?: Object) => Object | void;
filter: (id: string, def?: Function) => Function | void;
// allow dynamic method registration
[key: string]: any
}
~~~
# 5 Vue模板编译属性信息(compiler.js)
~~~
;模板编译器构造参数选项属性信息
declare type CompilerOptions = {
warn?: Function,
isIE?: boolean,
expectHTML?: boolean,
modules?: Array<ModuleOptions>, ;平台相关处理模块
staticKeys?: string,
directives?: { [key: string]: Function },
isUnaryTag?: (tag: string) => ?boolean,
isReservedTag?: (tag: string) => ?boolean,
mustUseProp?: (attr: string) => ?boolean,
getTagNamespace?: (tag: string) => ?string,
transforms?: Array<Function>,
// runtime user-configurable
delimiters?: [string, string]
}
;模板编译结果属性信息
declare type CompiledResult = {
ast: ?ASTElement, ;编译得到的ast
render: string, ;编译得到渲染函数
staticRenderFns: Array<string>, ;编译得到的渲染数组
errors?: Array<string> ;编译出错信息
}
;模板编译生成渲染结果信息
declare type CompiledFunctionResult = {
render: Function, ;渲染函数
staticRenderFns: Array<Function> ;渲染数组
}
;平台相关处理模块
declare type ModuleOptions = {
transformNode: (el: ASTElement) => void,
genData: (el: ASTElement) => string,
transformCode?: (el: ASTElement, code: string) => string,
staticKeys?: Array<string>
}
;AST节点事件处理信息
declare type ASTElementHandler = {
value: string,
modifiers: ?{ [key: string]: true }
}
;AST事件处理数组
declare type ASTElementHandlers = {
[key: string]: ASTElementHandler | Array<ASTElementHandler>
}
;AST生命周期钩子
declare type ASTElementHooks = { [key: string]: Array<string> }
;AST指令属性
declare type ASTDirective = {
name: string,
value: ?string,
arg: ?string,
modifiers: ?{ [key: string]: true }
}
;三种类型AST节点,1:元素节点,2:文本节点,3:表达式节点
declare type ASTNode = ASTElement | ASTText | ASTExpression
;元素节点
declare type ASTElement = {
type: 1,
tag: string,
attrsList: Array<{ name: string, value: string }>,
attrsMap: { [key: string]: string | null },
parent: ASTElement | void,
children: Array<ASTNode>,
static?: boolean,
staticRoot?: boolean,
text?: string,
attrs?: Array<{ name: string, value: string }>,
props?: Array<{ name: string, value: string }>,
staticAttrs?: Array<{ name: string, value: string }>,
plain?: boolean,
pre?: true,
ns?: string,
component?: string,
keepAlive?: boolean,
inlineTemplate?: true,
transitionMode?: string | null,
slotName?: ?string,
slotTarget?: ?string,
ref?: string,
refInFor?: boolean,
render?: true,
renderMethod?: ?string,
renderArgs?: ?string,
if?: string | null,
else?: true,
elseBlock?: ASTElement,
for?: string | null,
key?: string,
alias?: string,
iterator?: string,
staticClass?: string,
classBinding?: string,
styleBinding?: string,
hooks?: ASTElementHooks,
events?: ASTElementHandlers,
transition?: string | true,
transitionOnAppear?: boolean,
directives?: Array<ASTDirective>,
forbidden?: true,
once?: true
}
;表达式节点
declare type ASTExpression = {
type: 2,
expression: string,
text: string,
static?: boolean
}
;文本节点
declare type ASTText = {
type: 3,
text: string,
static?: boolean
}
;SFC相关属性声明
declare module 'de-indent' {
declare var exports: {
(str: string): string;
}
}
declare module 'source-map' {
declare class SourceMapGenerator {
setSourceContent(filename: string, content: string): void;
addMapping(mapping: Object): void;
toString(): string;
}
}
// an object format describing a single-file component.
declare type SFCDescriptor = {
template: ?SFCBlock,
script: ?SFCBlock,
styles: Array<SFCBlock>
}
declare type SFCBlock = {
type: string,
content: string,
start?: number,
end?: number,
lang?: string,
src?: string,
scoped?: boolean,
map?: Object
}
~~~
# 6 Vue虚拟dom属性信息(vnode.js)
~~~
;虚拟节点选项属性信息
;
declare type VNodeChildren = Array<any> | () => Array<any> | string
;
declare type VNodeComponentOptions = {
Ctor: Class<Component>,
propsData: ?Object,
listeners: ?Object,
parent: Component,
children: ?VNodeChildren,
tag?: string
}
;
declare interface MountedComponentVNode {
componentOptions: VNodeComponentOptions;
child: Component;
parent: VNode;
data: VNodeData;
}
;刷新函数中带数据的虚拟节点参数
// interface for vnodes in update modules
declare interface VNodeWithData {
tag: string;
data: VNodeData;
children: Array<VNode> | void;
text: void;
elm: HTMLElement;
ns: string | void;
context: Component;
key: string | number | void;
parent?: VNodeWithData;
child?: Component;
}
;虚拟节点的相关数据信息
declare interface VNodeData {
key?: string | number;
slot?: string;
ref?: string;
tag?: string;
staticClass?: string;
class?: any;
style?: Array<Object> | Object;
show?: true;
props?: { [key: string]: any };
attrs?: { [key: string]: string };
staticAttrs?: { [key: string]: string };
hook?: { [key: string]: Function };
on?: { [key: string]: Function | Array<Function> };
transition?: {
definition: String | Object,
appear: boolean
};
inlineTemplate?: {
render: Function,
staticRenderFns: Array<Function>
};
directives?: Array<VNodeDirective>;
keepAlive?: boolean;
}
;虚拟节点的指令属性
declare type VNodeDirective = {
name: string,
value?: any,
oldValue?: any,
arg?: string,
modifiers?: { [key: string]: boolean }
}
~~~
- 框架概述
- 框架目录
- 类型检查
- 测试示例
- 构建目录
- 核心依赖
- 框架结构
- 模板编译(compiler)
- directives(指令解析)
- parser(模板解析)
- codegen.js(生成渲染函数)
- error-detector.js(错误检测)
- events.js(事件解析)
- helpers.js(编译助手)
- index.js(编译入口)
- optimizer.js(解析优化)
- 核心接口(core)
- components(框架组件)
- global-api(框架扩展)
- instance(Vue核心)
- observer(数据绑定)
- util(核心工具)
- vdom(虚拟dom)
- config.js(配置文件)
- index.js(入口文件)
- 构建入口(entries)
- web-compiler.js(编译时)
- web-runtime.js(运行时)
- web-runtime-with-compiler.js(编译运行时)
- web-server-renderer.js(服务端渲染)
- 平台接口(platforms\web)
- compiler(web编译时)
- runtime(web运行时)
- server(web服务渲染)
- util(web工具)
- 服务端渲染(server)
- create-renderer.js(渲染接口)
- render.js(函数渲染)
- render-stream.js(流渲染)
- 工具目录(shared)
- util(工具文件)
- 框架流程
- Vue初始化
- Vue模板编译
- Vue数据渲染
- Vue数据绑定
- 框架更新
- 更新日志
- 基础原理
- js基础
- 数据绑定基础
- vdom基础
- mvvm基础
- 框架总结