vnode 对象
vnode
是一个对象,用来示意响应的 dom 构造
代码位置 :./src/vnode.ts
定义 vnode 范例
/**
* 定义VNode范例
*/
export interface VNode {
// 选择器
sel: string | undefined;
// 数据,重要包含属性、款式、数据、绑定时候等
data: VNodeData | undefined;
// 子节点
children: Array<VNode | string> | undefined;
// 关联的原生节点
elm: Node | undefined;
// 文本
text: string | undefined;
// key , 唯一值,为了优化机能
key: Key | undefined;
}
定义 VNodeData 的范例
/**
* 定义VNode 绑定的数据范例
*/
export interface VNodeData {
// 属性 能直接用 . 接见的
props?: Props;
// 属性
attrs?: Attrs;
// 款式类
class?: Classes;
// 款式
style?: VNodeStyle;
// 数据
dataset?: Dataset;
// 绑定的事宜
on?: On;
hero?: Hero;
attachData?: AttachData;
// 钩子
hook?: Hooks;
key?: Key;
ns?: string; // for SVGs
fn?: () => VNode; // for thunks
args?: Array<any>; // for thunks
[key: string]: any; // for any other 3rd party module
}
建立 VNode 对象
// 依据传入的 属性 ,返回一个 vnode 对象
export function vnode(
sel: string | undefined,
data: any | undefined,
children: Array<VNode | string> | undefined,
text: string | undefined,
elm: Element | Text | undefined
): VNode {
let key = data === undefined ? undefined : data.key;
return {
sel: sel,
data: data,
children: children,
text: text,
elm: elm,
key: key
};
}
export default vnode;