Vue渲染函数

一：节点、树以及虚拟 DOM

1. 浏览器的工作原理

<div>
  <h1>My title</h1>
  Some text content
  <!-- TODO: Add tagline -->
</div>

上述 HTML 对应的 DOM 节点树如下图所示：

每个元素都是一个节点。每段文字也是一个节点。甚至注释也都是节点。一个节点就是页面的一个部分。就像家谱树一样，每个节点都可以有孩子节点 (也就是说每个部分可以包含其它的一些部分)。

2.虚拟 DOM

“虚拟节点 (virtual node)”，也常简写它为“VNode”。
“虚拟 DOM”是我们对由 Vue 组件树建立起来的整个 VNode 树的称呼。

---

二：createElement 参数

1：第一个参数{String | Object | Function}

{String | Object | Function}
{HTML 标签名 | 组件选项对象 | 函数}

• String

<div id="app">
  <custom-element></custom-element>
</div>

<script>
  Vue.component('custom-element', {
    
      render: function (createElement) {
    
         return createElement('input')
      }
  })

  var vm = new Vue({
    
    el: '#app'
  })
</script>

• Object

<div id="app">
  <custom-element></custom-element>
</div>

<script>
  Vue.component('custom-element', {
    
      render: function (createElement) {
    
          return createElement({
    
            template: `<div>Hello Vue!</div>`
          })
      }
  })

  var vm = new Vue({
    
    el: '#app'
  })
</script>

• Function

<div id="app">
  <custom-element></custom-element>
</div>

<script>
  Vue.component('custom-element', {
    
      render: function (createElement) {
    
        var eleFun = function(){
    
          return {
    
            template:`<h1>我是方法</h1>`
          }
        }
          return createElement(
            eleFun()
          )
      }
  })

  var vm = new Vue({
    
    el: '#app'
  })
</script>

第一个参数是一个简单的HTML标签字符 “必选”
第二个参数是一个包含模板相关属性的数据对象 “可选”

2：第二个参数{Object}

{Object}
一个与模板中 attribute 对应的数据对象。是个可选参数

<div id="app">
  <custom-element></custom-element>
</div>

<script>
  Vue.component('