vue3 render函数的写法

简介

1： h() 到底会返回什么呢？其实不是一个实际的 DOM 元素。它更准确的名字可能是 createNodeDescription，因为它所包含的信息会告诉 Vue 页面上需要渲染什么样的节点，包括及其子节点的描述信息。我们把这样的节点描述为“虚拟节点 (virtual node)”，也常简写它为 VNode。“虚拟 DOM”是我们对由 Vue 组件树建立起来的整个 VNode 树的称呼

2：h() 函数是一个用于创建 VNode 的实用程序。也许可以更准确地将其命名为 createVNode()，但由于频繁使用和简洁，它被称为 h() 。它接受三个参数：

      import {h} from 'vue
   
      let remark = '备注'
      const myComponent = h(
        // 标签名 （必填）
        'input',
        // prop 或 attribute（可选）
        {
          value: remark,
          placeholder: '请输入备注',
          style: {
              width: '100px',
              height: '100px',
              background: 'red'
          },
          onChange:(event)=>{
            remark = `${event.currentTarget.value}` 
          },
          onClickCapture: ()=>{}
        },
        // 子 VNodes, （可选的）
        ['Some text comes first.', h('h1', {}, ['我是h1标签的内容'])]
      )