vue3+ts：render极简demo

一、背景介绍，render之前有简单在项目使用，但是我一直比较忙，没有系统研究，导致如果我要render方法写一个复杂组件还是有些困难，所以计划深入学习。先从一个极简demo开始，新手直接在项目里边复制代码就能看到效果，体验一下。

<template>
  <div class="render">
    <!-- 使用render后template里边内容不能展示，template区域可以删除掉 -->
    <div>template</div>
  </div>
</template>

<script lang="ts">
import { defineComponent, h,  } from "vue";

export default defineComponent({
  setup() {
    let name: ''
    return () => {
      return h(
        "div", // 标签，只写标签名，不写<>
        { // 属性
          ref: 'test-render-ref',
          class: 'test-render-class',
          // innerHTML: 'test-render-html' // 这里打开后子元素里边innerHTML内容不能展示
        },
        [ // 子元素
          h("p",{
            class: 'test-render-class-child',
            innerHTML: 'test-render-html-child'
          })
        ]
      );
    };
  }
})
</script>

效果：

 二、欢迎交流指正

三、参考链接：

Setup-render | Vue.js