使用 render 渲染函数是使用了 js 来渲染组件或标签

而我们平时使用时是直接在 template 标签中直接书写

这两种方法都可以实现组件或标签的创建

下面是使用 render 渲染的方法

import { h } from "vue";

export default {
  render: () => {
    return h(
     "p", // 第一个参数可以写标签名或者组件名
     // 第二个参数可以写属性、样式、事件等
     {
       // 添加属性类名
       id: "idName",
       class: "className",
       // 添加样式
       style: {
         height: "100%",
         border: "1px solid green",
         margin: "100px"
       },
       // 添加事件
       onClick: () => {
         console.log("点击事件执行");
       },
       onMouseover: () => {
         console.log("鼠标进入执行");
       },
       oncontextmenu: () => {
         console.log("右键点击事件执行");
       },
     },
     "这里是第三个参数可以写内容"
    );
  }
}

这里是vue单文件写成的，当然也可以使用纯 js 进行书写，下面是渲染过后的效果