[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 } } ~~~