案例
 
new Vue({
  router,
  store,
  render: h => h(App),
  beforeCreate(){
    Vue.prototype.$bus=this // 绑定全局事件总线
  }
}).$mount('#app')
 
解析
 
Vue 在调用 render 方法时，会传入一个 createElement 函数作为参数，这里的 h 就是 createElement 函数;
h函数的作用就是生成一个 VNode节点;
render 把h函数创建的vdom返回；
mount 方法，渲染成真实 DOM 节点，并挂载到（通常是div app）节点上。

  renderHeader(h,{column,$index}){

      return h(
        'div',
        {class:'',
        style:"padding-top:4px;"
        },
        [ 
          h('el-tooltip',
           {
             props:{
                content:"若设置结算时间，每天实际统计时间：从结算时间起24小时为一天",
                placement:"top",
                effect:"light",
             },
           },
           [
            h('span',{
            
            },[
                h('span',"日期"),
                h('i', {
                class:'cursorPointer fa fa-question-circle colorFE7F76',
                style:'margin-left:6px;',
                }),
            ]),
             
           ],
          ),
          
       ],
      );
    },
 
 

HTML attribute 和 DOM property
 
Vue 的 render 函数中的h方法用于创建虚拟DOM。
 
其中设置DOM属性的选项有两种：
 
attrs 用于设置HTML定义的 attribute
domProps 用于设置DOM定义的property
 
官方文档
 
attribute 和 property的关系
 
少量 HTML attribute 和 DOM property 之间有着1:1的映射，如：id
有些没有，如 colspan(attribute)、textContent(property)
说是映射，但是也有区别
 
attribute 和 property的区别
 
二者在初始化DOM时效果是一样的。
 
区别在于，property的值可以改变，attribute的值不能改变。
 
比较典型的两个案例：
 
value
 
<input value="foo" onchange="changeHandle()" />

<script>
  var input = document.querySelector('input')

  // 初始化时
  console.log(input.getAttribute('value')) // foo
  console.log(input.value) // foo

  function changeHandle() {
    console.log(input.getAttribute('value')) // foo
    console.log(input.value) // bar
  }
</script>
 
当浏览器渲染这个input时，会创建相应的DOM节点。
 
attribute 和 property的value都初始化为foo
 
当用户在输入框修改内容为bar后。
 
property的value变化了，而attribute的value保持不变。
 
也就是说：
 
HTML attribute 指定了value的初始值
DOM property 是value的当前值
 
disabled
 
我们可以通过设置property的disabled的值为 true/false来开启或关闭这个属性。
 
但是attribute无法通过设值的方式修改它，只能添加或删除这个属性。
 
<input id="prop" value="foo" />
<button onclick="changeDisabled()">property 启用/关闭disable</button>
<br><br>
<input disabled value="包含disabled属性就启用" />
<input disabled="false" value="attribute方式修改值无效" />
<script>
  var input = document.querySelector("input#prop")

  function changeDisabled() {
    input.disabled = !input.disabled
  }
</script>

Vue 中的render(h)
 
在vue架构中main.js往往为程序的入口文件，其中render()函数将h(app)中传入的内容渲染成虚拟节点(Vnode)，是补充通过模板template创建HTML的一种方法，事实上，template中内容也会被编译成Vnode，因此render函数比模板更接近编辑器。
 下面展示一些 main.js常见内容。
 
new Vue({
  router,
  store,
  // render函数的作用就是将App那个vue组件渲染成DOM节点。
  // render函数里面的形参，可以做到这一点，所以 h这个函数 ， 里面传进去一个App组件。
  render: h => h(App)
}).$mount('#app')
 
h函数是hyperscript 的缩写，它的作用就是生成一个Vnode节点，可以认为它是createElement一种简单的缩写表示。
 
render: function (createElement) { return createElement(App);
}
 
其中h()接受三个参数，返回vNode节点
 
// @returns {VNode}
h(
  // {String | Object | Function} tag
  // 一个 HTML 标签名、一个组件、一个异步组件、或
  // 一个函数式组件。
  //
  // 必需的。
  'div',

  // {Object} props
  // 与 attribute、prop 和事件相对应的对象。
  // 我们会在模板中使用。
  //
  // 可选的。
  {},

  // {String | Array | Object} children
  // 子 VNodes, 使用 `h()` 构建,
  // 或使用字符串获取 "文本 Vnode" 或者
  // 有插槽的对象。
  //
  // 可选的。
  [
    'Some text comes first.',
    h('h1', 'A headline'),
    h(MyComponent, {
      someProp: 'foobar'
    })
  ]
)