「这是我参与2022首次更文挑战的第5天，活动详情查看：2022首次更文挑战」

VNode

不要吹灭你的灵感和你的想象力; 不要成为你的模型的奴隶。 ——文森特・梵高

我们都知道 h函数 通过调用 vnode 方法创建了一个 VNode对象，并且返回了这个值，下面我们就来看这个方法

vnode.ts

路径： src/package/vnode.ts

我们先总体的查看一下这个文件

上面的 import 部分我们就先不看了，接着我们可以看见，文件中定义了三种类型

数据结构定义

• key类型：它约束我们VNode和 VNodeData中的key属性(标识VNode中的唯一标识对象)

• VNode接口：它是约束我们最终创建的VNode对象需要有那些属性

  1. sel: 选择器

  2. data: 描述模块中所需要的数据

  3. children: 这个属性用来描述对应的子节点

  4. text: 存储对应文本节点的文本内容

  注意children和text属性是互斥的，也就是这两个属性只有一个有值、起作用

  5. elm: 存储VNode对象最终转换的DOM元素

  6. key: 唯一标识节点

• VNodeData接口：限制VNode中的data属性的数据结构

ok，这里就简单吃（看）完了几个饭前甜点（数据结构），接下来我们要把目光放到重头戏上，也就是vnode方法了！

vnode 函数

• 参数
  1. sel: string | undefined,
  2. data: any | undefined,
  3. children: Array<VNode | string> | undefined,
  4. text: string | undefined,
  5. elm: Element | Text | undefined
• 返回值类型
  • VNode：这里的 VNode就是我们上面的VNode接口，就不细说了

这里我们简单的看完参数和返回值，多出了一个问题，我们的参数值是5个，但是返回值VNode却需要6个值，少了的哪一个是什么呢？

没错key！那我们来看代码中是如何处理的

const key = data === undefined ? undefined : data.key

这里我们先定义了一个内部成员key，之后就是一个简单的三元判断；这也就是 key 是通过data进行赋值的

最终 VNode的返回值

{ sel, data, children, text, elm, key }

VNode就是为了描述真实的Dom，好了这就告一段落了