Vue中的render函数

render函数主要将template转换为虚拟DOM 

//   template -> render -> h  ->虚拟DOM(JS对象) -> 真实DOM -> 真实页面
    const app = Vue.createApp({
      template: `
            <div >
              
                   <test :level="2">
                      hello
                   </test>
            </div>
        `,
    });
    app.component("test", { 
     props:['level'],
      render() {
        const { h } = Vue;
        //  this.$slots.default() 调用默认插槽的值
        // h函数三个参数 标签名 属性 内容
        // 内容中可以写一个数组 嵌套更多的h函数 也即是更多的虚拟DOM
        return h("h" + this.level, {}, [
          this.$slots.default(),
          h("h4", {}, "dell"),
        ]);
      },
    });