Use of vue virtual dom, Render and h functions

Purpose of most situations: In some places you can't write html, you need to return an html to him in the function in js

tip：要讲的就是代码里的h()；至于什么是虚拟dom，是面试必懂的东西，这里不赘述了
建议先看一眼官方文档，很多文章直接复制官方文档的，lj文章，看的浪费时间

usage:

The createElement() method, the alias is h(), it has three parameters, the first one is required,

chestnut:

h("p", {style: "color:red" }, "Do you want this reservation deposit activity to end immediately?")

Parameter 1: Accept a string, object, function

When the string is used, it is the label name, which is the'div' tag, or it can be a custom component name. When the
function is used, it is nothing more than return a string

Parameter two: receiving object, or array

The receiving array is for setting the sub-components. For example, I want to put a span in the div. It means that you also have an h() in h(), and the h inside is placed in the array

 h( 'div',
   [ h(),h() ]
 )

This is how you use the object, the code is more direct

{
    
    
  'class': {
    
    
     // 和`v-bind:class`一样的API
  },
  style: {
    
    
     // 和`v-bind:style`一样的API
  },
  attrs: {
    
    
     // 正常的 html 特性
  },
  props: {
    
    
    name:this.name   //用于从外面接收参数
  },
  on: {
    
    
    // 事件监听器基于on
    // 不再支持如 `v-on:keyup.enter` 修饰器，需手动匹配 keyCode
    //比如设置方法（一般是新建组件时候用到）
    mymethod() {
    
     console.log('w de 函数')}
    click: () => {
    
     console.log('点击事件')  }
    },
  slot: '', // 如果组件是其他组件的子组件，需为 slot 指定名称
  // 其他特殊顶层属性
  key: '',
  ref: ''
}

For example, when I meet such a demand in the company, I add a tip to the element header

Insert picture description here

<el-table-column label="剩余补课次数" :render-header="renderHeader" >
            
</el-table-column>

renderHeader (h, {
    
     column }) {
    
      // { column }是element函数参数
      let serviceContent = [
        h(
          'div',
          {
    
    
            slot: "content",
          },
          "剩余一对一补课次数/剩余插班补课次数"
        )
      ]
      return h("div", [
        h("span", column.label),
        h(
          "el-tooltip",
          {
    
    
            props: {
    
    
              placement: "top"
            }
          },
          [
            serviceContent,
            h("i", {
    
    
              class: "el-icon-question",
              style: "color: #ffd737;font-size: 16px;margin-left: 10px"
            })
          ]
        )
      ]);
    }

There is also a chestnut that is officially provided by element, you can see for yourself Insert picture description here