在 Vue.js 3 中，除了我们熟悉的模板语法（template），还有一种更底层、更灵活的方式来构建界面：render 函数。配合 h 函数和 JSX 语法，开发者可以像写 JavaScript 一样精确地控制虚拟 DOM 的生成。

1，h 函数介绍

2，h 函数基本用法

<script>
import { h } from 'vue'; // 导入h函数
export default {
    render() { // render函数
        return h("h4", { class: "title" }, "欢迎访问hangge.com")
    }
}
</script>
<style scoped>
.title {
    text-decoration: underline;
}
</style>

• 上面代码等价于下面使用模板的方式：

<template>
    <h4 class="title">欢迎访问hangge.com</h4>
</template>
<script>
export default {
}
</script>
<style scoped>
.title {
    text-decoration: underline;
}
</style>

（2）运行效果如下：

3，render 函数实现计数器

<script>
import { h } from 'vue'; // 导入h函数
export default {
    data() {
        return { counter: 0 }
    },
    render() {
        // div标签中包含:一个h4元素和2个button元素  
        return h("div", { class: "render-counter" }, [
            h("h4", null, `当前计数: ${this.counter}`),
            h("button", {
                onClick: () => this.counter++
            }, "+1"),
            h("button", {
                onClick: () => this.counter--
            }, "-1"),
        ])
    }
}
</script>

（2）运行效果如下：

4，setup 函数实现计数器

<script>
import { ref, h } from 'vue';
export default {
    setup() {
        const counter = ref(0); // 定义变量
        // setup函数返回一个render函数, 该函数可以直接使用在同一作用域中声明的响应式状态
        return () => {
            return h("div", { class: "app" }, [
                h("h2", null, `当前计数: ${counter.value}`),
                h("button", {
                    onClick: () => counter.value++
                }, "+1"),
                h("button", {
                    onClick: () => counter.value--
                }, "-1"),
            ])
        }
    }
}
</script>

（2）运行在浏览器中的效果和上面的案例一样：

5，在 render 函数中实现插槽

<script>
import { h } from "vue";
export default {
  render() {
    // 等价于：  
    // <div> 
    //     <h4>HelloWorld组件</h4> 
    //     <slot name="default"> 
    //         <span>插槽默认值</span> 
    //     </slot> 
    // </div>
    return h("div", { class: "hello-world" }, [
      h("h4", null, "HelloWorld组件"),
      // 定了一个默认的插槽
      this.$slots.default ? this.$slots.default({ name: "hangge" }) : h("span", null, "插槽默认值")
    ])
  }
}
</script>
<style scoped>
.hello-world {
  border: 1px solid #ddd;
  margin: 8px;
}
</style>

（2）下面是使用这个 HelloWorld.vue 组件的样例代码，同样使用 render 函数进行渲染：

<script>
import { h } from 'vue';
import HelloWorld from './HelloWorld.vue'; // 1.导入HelloWorld组件
export default {
    // 等价于：
    // <div class="render-slot">
    //   RenderSlot组件
    //   <HelloWorld>
    //      <template v-slot:default="slotProps">
    //          <span>传入HelloWorld插槽中的内容。插槽props的name: {{slotProps.name}}</span>
    //      </template>
    //   </HelloWorld>  
    // </div>
    render() {
        return h("div", { class: "render-slot" }, [
            'RenderSlot组件',
            // 2.使用HelloWorld组件   
            h(HelloWorld, null, {
                // 3.使用HelloWorld组件定义的默认插槽。props是：插槽props
                default: props => h("span", null,
                    `传入HelloWorld插槽中的内容。插槽props的name：${props.name}`)
            })
        ])
    }
}
</script>
<style scoped>
.render-slot {
    border: 1px solid #ddd;
    margin: 8px;
}
</style>

附：组件的 JSX 语法

1，基本介绍

2，计数器样例

<script lang="jsx">
export default {
    data() {
        return { counter: 0 }
    },
    render() {
        // 下面的方法也可以写到 methods 选项中
        const increment = () => this.counter++;
        const decrement = () => this.counter--;
        return (
            <div class="app" style="border:1px solid #ddd;padding:4px">
                <h4>当前计数: {this.counter}</h4>
                <button onClick={increment}>+1</button>
                <button onClick={decrement}>-1</button>
            </div>
        )
    }
}
</script>

（2）运行效果如下：

3，插槽样例

<script lang="jsx">
export default {
  render() {
    return (
      <div style="border:1px solid #ddd;margin:8px">
        <div>HelloWorld组件</div>
        {/**这里编写的是注释：定义default插槽*/}
        {this.$slots.default ? this.$slots.default() : <span>插槽默认内容</span>}
      </div>
    )
  }
}
</script>

（2）接着我们在父组件中导入 HellWorld.vue 组件，然后在 render 函数的 JSX 模板中使用该组件。

<script lang="jsx">
import HelloWorld from './HelloWorld.vue';
export default {
    render() {
        return (
            <HelloWorld />
        )
    }
}
</script>

（3）运行效果如下：