h函数与createVNode函数都可以创建vnode（虚拟节点），两个函数的用法几乎一样

h函数

.vue文件写法

在.vue文件中不使用template标签，而是使用h函数构造节点

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

export default defineComponent({
    setup() {
        return () => h('div',{id:'box'},'hello world');
    },
})
</script>

.ts文件写法

import { defineComponent } from 'vue'
import { h } from 'vue'

export default defineComponent({
    setup() {
        return () => h('div',{id:'box'},'hello world');
    },
})

.tsx文件写法

首先要安装babel 运行命令：vue add babel 这时会多出一个名为babel.config.js的文件，内容如下：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

注意：如果是vue-cli项目，需要升级vue-cli的版本，否则会报错：you may need an additional loader to handle the result of these loaders. 接下来可以使用.tsx文件来编写h函数

import { defineComponent } from 'vue'

export default defineComponent({
    name:"VNode",
    setup() {
        return () => (
            <div>hello world</div>
        )
    },
})