render 函數作用

render 函數 跟 template 一樣都是創建 html 模板的，但是有些場景中用 template 實現起來代碼冗長繁瑣而且有大量重復，這時候就可以用 render 函數

render 函數講解

render 函數即渲染函數，它是個函數，它的參數也是個函數——即 createElement

render 函數的返回值（VNode）

VNode（即：virtual node 虛擬節點），也就是我們要渲染的節點

render 函數的參數（createElement）

createElement 是 render 函數 的參數，它本身也是個函數，并且有三個參數

1. 一個 HTML 標簽名、組件選項對象，或者 resolve 了上述任何一種的一個 async 函數，類型:{ String | Object | Function }，必填項
2. 一個與模板中 attribute 對應的數據對象，類型：{ Object }，可選
3. 子級虛擬節點 ( VNodes )，由 createElement() 構建而成，也可以使用字符串來生成 “文本虛擬節點”，類型：{ String | Array }，可選

/**
 * render: 渲染函數
 * @param {Function} createElement
 * @returns {VNode}
 */
render: createElement => {
    return createElement(
        // 1. 第一個參數，要渲染的標簽名稱【必需】
        'div',
        // 2. 第二個參數，1 中渲染的標簽的屬性【可選】，不使用此參數，用 null 占位
        {
            // 與 `v-bind:class` 的 API 相同，
            // 接受一個字符串、對象或字符串和對象組成的數組
            'class': {
                foo: true,
                bar: false
            },
            // 與 `v-bind:style` 的 API 相同，
            // 接受一個字符串、對象，或對象組成的數組
            style: {
                color: 'red',
                fontSize: '14px'
            },
            // 普通的 HTML attribute
            attrs: {
                id: 'foo'
            },
            // 組件 prop
            props: {
                myProp: 'bar'
            },
            // DOM property
            domProps: {
                innerHTML: 'baz'
            },
            // 事件監聽器在 `on` 內，
            // 但不再支持如 `v-on:keyup.enter` 這樣的修飾器。
            // 需要在處理函數中手動檢查 keyCode。
            on: {
                click: this.clickHandler
            },
            // 僅用于組件，用于監聽原生事件，而不是組件內部使用
            // `vm.$emit` 觸發的事件。
            nativeOn: {
                click: this.nativeClickHandler
            },
            // 自定義指令。注意，你無法對 `binding` 中的 `oldValue`
            // 賦值，因為 Vue 已經自動為你進行了同步。
            directives: [
                {
                    name: 'my-custom-directive',
                    value: '2',
                    expression: '1 + 1',
                    arg: 'foo',
                    modifiers: {
                        bar: true
                    }
                }
            ],
            // 作用域插槽的格式為
            // { name: props => VNode | Array<VNode> }
            scopedSlots: {
                default: props => createElement('span', props.text)
            },
            // 如果組件是其它組件的子組件，需為插槽指定名稱
            slot: 'name-of-slot',
            // 其它特殊頂層 property
            key: 'myKey',
            ref: 'myRef',
            // 如果你在渲染函數中給多個元素都應用了相同的 ref 名，
            // 那么 `$refs.myRef` 會變成一個數組。
            refInFor: true
        },
        // 3. 第三個參數，1 中渲染的標簽的子元素數組【可選】，不使用此參數，用 null 占位 或不寫
        [
            createElement(
                'span', 
                null, 
                '友情鏈接'
            )，
            createElement(
                'a', 
                {
                    attrs: {
                        href: 'https://www.baidu.com'
                    }
                }, 
                '百度'
            )
        ]
    )
}

將 h 作為 createElement 的別名是 Vue 生態系統中的一個通用慣例，實際上也是 JSX 所要求的
const h = this.$createElement，這樣你就可以去掉 (h) 參數了

render: h => h(App)