render 函數(shù)作用

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

render 函數(shù)講解

render 函數(shù)即渲染函數(shù)，它是個函數(shù)，它的參數(shù)也是個函數(shù)——即 createElement

render 函數(shù)的返回值（VNode）

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

render 函數(shù)的參數(shù)（createElement）

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

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

/**
 * render: 渲染函數(shù)
 * @param {Function} createElement
 * @returns {VNode}
 */
render: createElement => {
    return createElement(
        // 1. 第一個參數(shù)，要渲染的標簽名稱【必需】
        'div',
        // 2. 第二個參數(shù)，1 中渲染的標簽的屬性【可選】，不使用此參數(shù)，用 null 占位
        {
            // 與 `v-bind:class` 的 API 相同，
            // 接受一個字符串、對象或字符串和對象組成的數(shù)組
            'class': {
                foo: true,
                bar: false
            },
            // 與 `v-bind:style` 的 API 相同，
            // 接受一個字符串、對象，或?qū)ο蠼M成的數(shù)組
            style: {
                color: 'red',
                fontSize: '14px'
            },
            // 普通的 HTML attribute
            attrs: {
                id: 'foo'
            },
            // 組件 prop
            props: {
                myProp: 'bar'
            },
            // DOM property
            domProps: {
                innerHTML: 'baz'
            },
            // 事件監(jiān)聽器在 `on` 內(nèi)，
            // 但不再支持如 `v-on:keyup.enter` 這樣的修飾器。
            // 需要在處理函數(shù)中手動檢查 keyCode。
            on: {
                click: this.clickHandler
            },
            // 僅用于組件，用于監(jiān)聽原生事件，而不是組件內(nèi)部使用
            // `vm.$emit` 觸發(fā)的事件。
            nativeOn: {
                click: this.nativeClickHandler
            },
            // 自定義指令。注意，你無法對 `binding` 中的 `oldValue`
            // 賦值，因為 Vue 已經(jīng)自動為你進行了同步。
            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',
            // 如果你在渲染函數(shù)中給多個元素都應用了相同的 ref 名，
            // 那么 `$refs.myRef` 會變成一個數(shù)組。
            refInFor: true
        },
        // 3. 第三個參數(shù)，1 中渲染的標簽的子元素數(shù)組【可選】，不使用此參數(shù)，用 null 占位 或不寫
        [
            createElement(
                'span', 
                null, 
                '友情鏈接'
            )，
            createElement(
                'a', 
                {
                    attrs: {
                        href: 'https://www.baidu.com'
                    }
                }, 
                '百度'
            )
        ]
    )
}

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

render: h => h(App)

const h = this.$createElement;
this.$message({
    message: h('p', null, [
        h('span', null, '內(nèi)容可以是 '),
        h('i', { style: 'color: teal' }, 'VNode')
    ])
});