版本校准： 本文出现 Object.defineProperty、Dep、Watcher 和双端 Diff 时，主要描述 Vue 2 实现；Vue 3 使用 Proxy、effect 与新的渲染器路径。Vue 2 已于 2023-12-31 结束维护，新项目应以 Vue 3 为基线，旧项目参考 Vue 2 EOL 官方说明 制定迁移与安全策略。

自从有了 VNode ，开发页面的方式就变成了书写 VNode，但如果日常开发中需要手写 VNode ，那绝对是反人类的，在“组件的本质”一章中我们使用了 snabbdom 的 h 函数来辅助讲解一些小例子，h 函数作为创建 VNode 对象的函数封装，在一定程度上改善了这个问题，但却没有解决本质问题，这也是为什么我们需要模板或 jsx 的原因。但 h 函数依然很重要，因为无论是模板还是 jsx 都需要经过编译，那么是直接编译成 VNode 树好呢？还是编译成由 h 函数组成的调用集合好呢？这个其实很难说，但可以肯定的一点是，我们将可公用、灵活、复杂的逻辑封装成函数，并交给运行时，这能够大大降低编译器的书写难度，甚至经过编译器生成的代码也具有一定的可读性，而 h 函数就是众多运行时函数中的一个。

# 在VNode创建时确定其类型 - flags

一个最简单的 h 函数如下：

function h() {
  return {
    _isVNode: true,
    flags: VNodeFlags.ELEMENT_HTML,
    tag: 'h1',
    data: null,
    children: null,
    childFlags: ChildrenFlags.NO_CHILDREN,
    el: null
  }
}

这个 h 函数只能用来创建一个空的 <h1></h1> 标签，可以说没有任何意义。为了让 h 函数更加灵活，我们可以增加一些参数，问题是哪些内容应该提取到参数中呢？如果提取的参数多了，就会导致函数的使用不便，如果提取的参数少了又会导致函数的功能不足，所以这也是一个探索的过程。实际上只需要把 tag、data 和 children 提取为参数即可：

function h(tag, data = null, children = null) {
  //...
}

我们来看看为什么三个参数就能满足需求，对于 _isVNode 属性，它的值始终都为 true，所以不需要提取到参数中。对于 flags 属性，我们可以通过检查 tag 属性值的特征来确定该 VNode 的 flags 属性值，如下：

function h(tag, data = null, children = null) {
  let flags = null
  if (typeof tag === 'string') {
    flags = tag === 'svg' ? VNodeFlags.ELEMENT_SVG : VNodeFlags.ELEMENT_HTML
  }
}

如上代码所示，如果 tag 是字符串则可以确定该 VNode 是标签元素，再次通过 tag === 'svg' 进一步判断是否是 SVG 标签，从而确定了该 VNode 的类型。

对于 Fragment 类型的 VNode，它的 tag 属性值为 null，但是纯文本类型的 VNode 其 tag 属性值也是 null，所以为了区分，我们可以增加一个唯一的标识，当 h 函数的第一个参数(tag)的值等于该标识的时候，则意味着创建的是 Fragment 类型的 VNode：

// 唯一标识
export const Fragment = Symbol()
function h(tag, data = null, children = null) {
  let flags = null
  if (typeof tag === 'string') {
    flags = tag === 'svg' ? VNodeFlags.ELEMENT_SVG : VNodeFlags.ELEMENT_HTML
  } else if (tag === Fragment) {
    flags = VNodeFlags.FRAGMENT
  }
}

这时我们可以像如下这样调用 h 函数创建 Fragment：

import { h, Fragment } from 'vue'

h(Fragment, null, children)

类似的，对于Portal 类型的 VNode，它的 tag 属性值也可以是字符串，这就会与普通标签元素类型的 VNode 冲突，导致无法区分一个 VNode 到底是普通标签元素还是 Portal，所以我们参考 Fragment 的实现方式，增加一个 Portal 标识：

export const Fragment = Symbol()
export const Portal = Symbol()
function h(tag, data = null, children = null) {
  let flags = null
  if (typeof tag === 'string') {
    flags = tag === 'svg' ? VNodeFlags.ELEMENT_SVG : VNodeFlags.ELEMENT_HTML
  } else if (tag === Fragment) {
    flags = VNodeFlags.FRAGMENT
  } else if (tag === Portal) {
    flags = VNodeFlags.PORTAL
    tag = data && data.target
  }
}

这里需要注意的一点是，类型为 Portal 的 VNode，其 tag 属性值存储的是 Portal 挂载的目标，即 target。通常模板在经过编译后，我们把 target 数据存储在 VNodeData 中，所以我们看到如上代码中包含 tag = data && data.target。

如果一个 VNode 对象的 tag 属性值不满足以上全部条件，那只有一种可能了，即该 VNode 是组件。有的同学可能会说，也有可能是文本节点啊，没错，但是我们很少会用 h 函数去创建一个文本节点，而是单纯的使用字符串，然后在内部实现中检测到该字符串的寓意是文本节点的时候会为其自动创建一个纯文本的 VNode 对象，例如：

h(
  'div',
  {
    style: { color: 'red' }
  },
  '我是文本'
)

如上代码所示，h 函数的第三个参数 children 的值是一段文本字符串，这时在 h 函数内部会为这段文本字符串创建一个与之相符的纯文本 VNode 对象。

我们回过头来，继续讨论当一个 VNode 是组件时，如何根据 tag 属性确定该 VNode 对象的 flags 值，很简单如下：

// 省略...
function h(tag, data = null, children = null) {
  let flags = null
  if (typeof tag === 'string') {
    flags = tag === 'svg' ? VNodeFlags.ELEMENT_SVG : VNodeFlags.ELEMENT_HTML
  } else if (tag === Fragment) {
    flags = VNodeFlags.FRAGMENT
  } else if (tag === Portal) {
    flags = VNodeFlags.PORTAL
    tag = data && data.target
  } else {
    // 兼容 Vue2 的对象式组件
    if (tag !== null && typeof tag === 'object') {
      flags = tag.functional
        ? VNodeFlags.COMPONENT_FUNCTIONAL       // 函数式组件
        : VNodeFlags.COMPONENT_STATEFUL_NORMAL  // 有状态组件
    } else if (typeof tag === 'function') {
      // Vue3 的类组件
      flags = tag.prototype && tag.prototype.render
        ? VNodeFlags.COMPONENT_STATEFUL_NORMAL  // 有状态组件
        : VNodeFlags.COMPONENT_FUNCTIONAL       // 函数式组件
    }
  }
}