javascriptvue.jsvuejs3virtual-domvue-render-function

Are `h` and `createVNode` the same?

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>
Solution

  • For h:

    props can be omitted when there are no props

    You can just do:

    h('strong', 'Foo')

    For createVNode, you have to do:

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