vue3中使用render函数创建元素（2024-06-19）

vue3使用render，h函数

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

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

测试结果：