Are `h` and `createVNode` the same?

Question

Both h and createVNode are exposed from vue.

The doc seems to suggest they are the same:

The h() function is a utility to create VNodes. It could perhaps more accurately be named createVNode().

But switch h to createVNode will throw:

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

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

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

As the docs mention, they are not the same. `createVNode` would be a better name.. but it's still called `h`. — RonaldT, Apr 21 '21 at 06:32
`createVNode` is exposed from `vue` tho, so they are supposed to act the same? — Wenfang Du, Apr 21 '21 at 06:34

score 4 · Answer 1 · answered Apr 21 '21 at 06:52

createVNode is exposed but h is the user friendly variant of it. If you want to call createVNode directly you should add different type of arguments, see:

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
    )

score 2 · Accepted Answer · answered Apr 21 '21 at 07:04

2

For h:

If there are no props then the children can usually be passed as the second argument.

You can just do:

h('strong', 'Foo')

For createVNode, you have to do:

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

answered Apr 21 '21 at 07:04

Wenfang Du

8,804
9
59
90

score 0 · Answer 3 · answered Jul 04 '23 at 01:32

//h method Actual implementation
function h(type, propsOrChildren, children) {
    const l = arguments.length;
    if (l === 2) {
        if (isObject(propsOrChildren) && !isArray(propsOrChildren)) {
            // single vnode without props
            if (isVNode(propsOrChildren)) {
                return createVNode(type, null, [propsOrChildren]);
            }
            // props without children
            return createVNode(type, propsOrChildren);
        }
        else {
            // omit props
            return createVNode(type, null, propsOrChildren);
        }
    }
    else {
        if (l > 3) {
            children = Array.prototype.slice.call(arguments, 2);
        }
        else if (l === 3 && isVNode(children)) {
            children = [children];
        }
        return createVNode(type, propsOrChildren, children);
    }
}

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Jul 05 '23 at 11:32

Are `h` and `createVNode` the same?

3 Answers3