javascript - `h` 和 `createVNode` 是一样的吗？

Question

两者h都createVNode暴露于vue.

该文档似乎暗示它们是相同的：

h() 函数是创建 VNode 的实用程序。它可能更准确地命名为createVNode()。

但是切换h到createVNode会抛出：

<script lang="ts">
  import { createVNode, defineComponent, h } from 'vue'

  export default defineComponent({
    setup() {
      // works
      return () => h('strong', 'Foo')

      // throws
      return () => createVNode('strong', 'Foo')
    },
  })
</script>

Answer 1

createVNode已暴露，但h它是用户友好的变体。如果要createVNode直接调用，则应添加不同类型的参数，请参见：

https://github.com/vuejs/vue-next/blob/060c5f1d0ae999cd8c8fb965e8526ffab17ac2d1/packages/runtime-core/src/vnode.ts#L326

    export const createVNode = (__DEV__
      ? createVNodeWithArgsTransform
      : _createVNode) as typeof _createVNode

    function _createVNode(
      type: VNodeTypes | ClassComponent | typeof NULL_DYNAMIC_COMPONENT,
      props: (Data & VNodeProps) | null = null,
      children: unknown = null,
      patchFlag: number = 0,
      dynamicProps: string[] | null = null,
      isBlockNode = false
    )

Answer 2

对于h：

如果没有道具，那么孩子通常可以作为第二个参数传递。

你可以这样做：

h('strong', 'Foo')

对于createVNode，你必须这样做：

createVNode('strong', null, 'Foo')