vue3中使用render函数

vue3使用render，h函数(未使用setup语法糖)

1：vue3中需要从vue中先引入h

import { h } from "vue";

2：定义render函数

const renderButton = {
  render: () => {
    return h(
      // 1. 要渲染的标签名称：第一个参数【必需】
      "button",
      // 2. 渲染标签的属性：第二个参数【可选】
      {
        style: {
          color: "#333",
          border: "1px solid #ccc",
        },
        class: "",
        id: "",
        onClick: changeNum,
      },
      // 3. 渲染标签的子元素数组：第三个参数【可选】
      [
        // "render函数文本" 文本内容可以直接写入
        h("p", num.value), // h()创建的VNodes
      ]
    );
  },
};

let num = ref(0);  // vue3中需要使用ref或reactive声明变量，否则无法实现双向数据绑定
const changeNum = () => {
    num.value++    // 改变ref定义的变量值需要使用.value , reactive不需要 
}

// 未使用setup语法糖时需要使用return，使用则无需return即可实现双向数据绑定
return{
    num,
    changeNum
}

3：在template直接当作组件

<renderButton />

之前没有接触过render函数，直接在vue3上进行使用，网上找了很多方法，很多都是在setup中使用，没有找到在setup语法糖中的写法，试了很多次才搞明白，菜🐕飘过

vue3 在setup语法糖中使用render，h函数
 

<template>
  <div>
    <renderButton />
  </div>
</template>

<script setup>
import { h, ref } from "vue";
const renderButton = {
  render: () => {
    return h(
      // 1. 要渲染的标签名称：第一个参数【必需】
      "button",
      // 2. 渲染标签的属性：第二个参数【可选】
      {
        style: {
          color: "#333",
          border: "1px solid #ccc",
        },
        class: "",
        id: "",
        onClick: changeNum,
      },
      // 3. 渲染标签的子元素数组：第三个参数【可选】
      [
        // "render函数文本" 文本内容可以直接写入
        h("p", num.value), // h()创建的VNodes
      ]
    );
  },
};
let num = ref(0);  // vue3中需要使用ref或reactive声明变量，否则无法实现双向数据绑定
const changeNum = () => {
  num.value++    // 改变ref定义的变量值需要使用.value , reactive不需要 
}

</script>

测试结果：