vue的h函数和template语法如何混用？

前言：

h函数定义：

我们编写的代码转化为真正的dom时，首先会先转换为VNode,然后多个Vnode进行结合起来转化为VDOM，最后VDOM才渲染成真实的DOM。在 Vue.js 中，h 函数是 createElement 的别名，它是 Vue 用来创建虚拟 DOM 节点(vnode)的一个函数。这个函数在编写渲染函数（render functions）时非常有用。通过使用 h 函数，你可以更加灵活地控制应用的输出结构，而不是仅仅依赖于模板。

h函数怎么使用，请看这篇博客：vue不得不会的h函数

那么我们有些场景难免会遇到h函数和template语法混用的时候，那么我们怎么样才能把h函数和template结合起来使用呢？

template语法版本：

<template>
  <div> 
    新页面
    ...
  </div>
</template>
 
<script setup lang="ts">
...
</script>
 
<style lang="less" scoped>
...
</style>

h函数版本：

<script>
import { h } from "vue";

export default {
  setup() {
    return () => h("div", null, "新页面...");
  },
};
</script>

思路：

React框架里一个函数就是一个组件，如果我们能把vue里h函数定义的函数也做成一个组件，那么我们不就能在template里进行调用了嘛~

在这里vue提供了一个api，叫做defineComponent就可以帮我们很好的实现，把h函数定义的函数做成一个单独的函数组件。

演示代码：

<template>
    <div>
        <h1>测试h函数与template语法混用</h1>
        <div>
            <hChildren info="number" />
        </div>
    </div>
</template>

<script setup>
import { defineComponent, h } from "vue";

const hChildren = defineComponent({
    props: {
        info: {
            type: String,
            default: ''
        }
    },
    setup() {
        return (props) => h('div',null,`123456 is ${props.info}`)
    }
});
</script>

效果图：

事实证明，我们的方法是可行的，那么你学会了吗？

拓展：

vue的h函数是什么

在 Vue.js 中，h 函数是 Vue 的虚拟 DOM 渲染函数。它用于创建 VNode（虚拟节点），这是 Vue 在渲染和更新 DOM 时使用的一种内部表示。

h 函数的基本语法如下：

h(
  // {String | Object | Function} tag
  // 一个 HTML 标签名、一个组件选项对象，或者一个 resolve 了上述任何一种类型的函数。必填项。
  'div',

  // {Object} data
  // 一个与模板中属性对应的数据对象。可选。
  {
    // 事件监听器。
    // 这边的事件监听器将会被添加到该组件的根元素上。
    on: {
      click: this.clickHandler
    }
  },

  // {String | Array} children
  // 子 VNodes, 使用 `h()` 函数生成，或者使用字符串来使用普通的 HTML 文本节点，或者带有插槽的对象。
  [
    'Some text content',
    h('h1', 'A heading')
  ]
)

在 Vue 3 中，h 函数被重命名为 createVNode，但它们的功能是相同的。

h 函数是 Vue 的底层 API，通常在创建自定义组件或编写渲染函数时使用。如果你只是编写普通的 Vue 组件，你通常不需要直接使用 h 函数，因为 Vue 的模板编译器会自动为你生成对应的 h 函数调用。

vue的h函数和jsx的区别

Vue 的 h 函数和 JSX 都是用于创建虚拟 DOM 的方式，但它们有一些重要的区别：

语法：h 函数是 Vue 的虚拟 DOM 渲染函数，它的语法更接近于 JavaScript。而 JSX 是一种 JavaScript 的语法扩展，它允许你在 JavaScript 代码中编写类似 HTML 的代码。

使用场景：h 函数通常在编写 Vue 的渲染函数时使用，而 JSX 通常在编写 React 组件时使用。Vue 也支持 JSX，但需要使用特定的 Babel 插件。

功能：h 函数是 Vue 的内置函数，它可以直接使用。而 JSX 是一种语法扩展，你需要使用 Babel 等工具将其转换为 JavaScript 代码。

性能：由于 JSX 是一种语法扩展，它需要 Babel 等工具进行转换，可能会增加一些性能开销。而 h 函数是 Vue 的内置函数，它的性能通常更好。

总的来说，h 函数和 JSX 都是用于创建虚拟 DOM 的方式，但它们有一些重要的区别。你应该根据你的具体需求和应用场景来选择使用哪种方式。