Vue-render方法

看了官網的渲染函數render，https://cn.vuejs.org/v2/guide/render-function.html，對於剛接觸的話，可能會懵逼的，會不知道啥意思。後面話 根據資料和文檔  寫下自己的見解  雖然有點粗糙

Vue.component('anchored-heading', {
  /*
  @params createElement  聲明工具函數的名稱；
    接受三個參數
    ElementName:設定抽象語法樹根節點元素名稱； string   比如 p,h2,div等html標籤元素
    ElementProperty:設定根節點元素的屬性； Object 給標籤元素添加屬性樣式方法等 {style : {}, on : {}, attrs : [],class : []}
    ChildNode:設定子節點； String | Array 給標籤添加子元素  可以是一個字符串 也是一個 createElement組成的數組
  @returns {VNode}
  */
  render: function (createElement) {
    return createElement(
      'h' + this.level,   // tag name 標籤名稱
      {
        style : {
            fontSize : 10px,
        },
        on : {
            動作: 方法
            click : function(){}
        }
      },
       //第三個參數可以傳文本 也是 工具方法
      //文本的話
      ‘我是元素的子元素’,
      // 工具方法, 也就是多個子元素
     [
         createElement(ElementName,ElementProperty,ChildNode),
         createElement(ElementName,ElementProperty,ChildNode),
     ]
    )
  }
 
})

 在render的createElement  裏面 不僅可以渲染一個  也可以添加多個元素，但最外層就要用個盒子包裹起來  有點類似HTML的佈局方式  只不過這個是用JavaScript來代替渲染繪畫