vue源码中vnode.js中构造函数中的带?参数形式怎么理解？

Question

问题1：

children: ?Array<VNode>;这个参数形式怎么理解？

问题2：

constructor (

tag?: string,
)

这种参数怎么理解？为什么要加?，是怎么使用的？

/\* @flow \*/

export default class VNode {

tag: string | void;

data: VNodeData | void;

children: ?Array<VNode\>;

text: string | void;

elm: Node | void;

ns: string | void;

context: Component | void; // rendered in this component's scope

key: string | number | void;

componentOptions: VNodeComponentOptions | void;

componentInstance: Component | void; // component instance

parent: VNode | void; // component placeholder node

// strictly internal

raw: boolean; // contains raw HTML? (server only)

isStatic: boolean; // hoisted static node

isRootInsert: boolean; // necessary for enter transition check

isComment: boolean; // empty comment placeholder?

isCloned: boolean; // is a cloned node?

isOnce: boolean; // is a v-once node?

asyncFactory: Function | void; // async component factory function

asyncMeta: Object | void;

isAsyncPlaceholder: boolean;

ssrContext: Object | void;

fnContext: Component | void; // real context vm for functional nodes

fnOptions: ?ComponentOptions; // for SSR caching

devtoolsMeta: ?Object; // used to store functional render context for devtools

fnScopeId: ?string; // functional scope id support

constructor (

tag?: string,

data?: VNodeData,

children?: ?Array<VNode\>,

text?: string,

elm?: Node,

context?: Component,

componentOptions?: VNodeComponentOptions,

asyncFactory?: Function

) {

this.tag \= tag

this.data \= data

this.children \= children

this.text \= text

this.elm \= elm

this.ns \= undefined

this.context \= context

this.fnContext \= undefined

this.fnOptions \= undefined

this.fnScopeId \= undefined

this.key \= data && data.key

this.componentOptions \= componentOptions

this.componentInstance \= undefined

this.parent \= undefined

this.raw \= false

this.isStatic \= false

this.isRootInsert \= true

this.isComment \= false

this.isCloned \= false

this.isOnce \= false

this.asyncFactory \= asyncFactory

this.asyncMeta \= undefined

this.isAsyncPlaceholder \= false

}

// DEPRECATED: alias for componentInstance for backwards compat.

/\* istanbul ignore next \*/

get child (): Component | void {

return this.componentInstance

}

}

export const createEmptyVNode \= (text: string \= '') \=> {

const node \= new VNode()

node.text \= text

node.isComment \= true

return node

}

export function createTextVNode (val: string | number) {

return new VNode(undefined, undefined, undefined, String(val))

}

// optimized shallow clone

// used for static nodes and slot nodes because they may be reused across

// multiple renders, cloning them avoids errors when DOM manipulations rely

// on their elm reference.

export function cloneVNode (vnode: VNode): VNode {

const cloned \= new VNode(

vnode.tag,

vnode.data,

// #7975

// clone children array to avoid mutating original in case of cloning

// a child.

vnode.children && vnode.children.slice(),

vnode.text,

vnode.elm,

vnode.context,

vnode.componentOptions,

vnode.asyncFactory

)

cloned.ns \= vnode.ns

cloned.isStatic \= vnode.isStatic

cloned.key = vnode.key

cloned.isComment = vnode.isComment

cloned.fnContext = vnode.fnContext

cloned.fnOptions = vnode.fnOptions

cloned.fnScopeId = vnode.fnScopeId

cloned.asyncMeta = vnode.asyncMeta

cloned.isCloned = true

return cloned

}

Answer 1

vue2 是使用 flow 编写的，参考 https://flow.org/

Answer 2

这些都是标准的ts语法（js的超集），与go强类型语言类似。都是类型在后参数在前，只不过有了泛型。
示例

tag: string | void; // tag属性或为字符串类型或为空

data: VNodeData | void; // data 类型为VNodeData类实例或为空

children: ?Array<VNode>; // chirden 为可选（可有可无）Array类型，每个数组元素则为VNode类型实例

Answer 3

Vue技术内幕

这个问题回答起来篇幅会很多，上面这份Vue源码分析里都有涉及，希望会帮到你。