深入理解Vue組件之render函數(shù)
一般來(lái)說(shuō)，我們寫 Vue.js 組件，模板都是寫在?<template>?內(nèi)的，但它并不是最終呈現(xiàn)的內(nèi)容，template 只是一種對(duì)開(kāi)發(fā)者友好的語(yǔ)法，能夠一眼看到 DOM 節(jié)點(diǎn)，容易維護(hù)，在 Vue.js 編譯階段，會(huì)解析為 Virtual DOM。
與 DOM 操作相比，Virtual DOM 是基于 JavaScript 計(jì)算的，所以開(kāi)銷會(huì)小很多。
正常的 DOM 節(jié)點(diǎn)在 HTML 中是這樣的：
用 Virtual DOM 創(chuàng)建的 JavaScript 對(duì)象一般會(huì)是這樣的：
vNode 對(duì)象通過(guò)一些特定的選項(xiàng)描述了真實(shí)的 DOM 結(jié)構(gòu)。
在 Vue.js 中，對(duì)于大部分場(chǎng)景，使用 template 足以應(yīng)付，但如果想完全發(fā)揮 JavaScript 的編程能力，或在一些特定場(chǎng)景下，需要使用 Vue.js 的 Render 函數(shù)。
Render 函數(shù)
正如上文介紹的 Virtual DOM 示例一樣，Vue.js 的 Render 函數(shù)也是類似的語(yǔ)法，需要使用一些特定的選項(xiàng)，將 template 的內(nèi)容改寫成一個(gè) JavaScript 對(duì)象。
對(duì)于初級(jí)前端工程師，或想快速建站的需求，直接使用 Render 函數(shù)開(kāi)發(fā) Vue.js 組件是要比 template 困難的，原因在于 Render 函數(shù)返回的是一個(gè) JS 對(duì)象，沒(méi)有傳統(tǒng) DOM 的層級(jí)關(guān)系，配合上 if、else、for 等語(yǔ)句，將節(jié)點(diǎn)拆分成不同 JS 對(duì)象再組裝，如果模板復(fù)雜，那一個(gè) Render 函數(shù)是難讀且難維護(hù)的。所以，絕大部分組件開(kāi)發(fā)和業(yè)務(wù)開(kāi)發(fā)，我們直接使用 template 語(yǔ)法就可以了，并不需要特意使用 Render 函數(shù)，那樣只會(huì)增加負(fù)擔(dān)，同時(shí)也放棄了 Vue.js 最大的優(yōu)勢(shì)（React 無(wú) template 語(yǔ)法）。
很多學(xué)習(xí) Vue.js 的開(kāi)發(fā)者在遇到 Render 函數(shù)時(shí)都有點(diǎn)”躲避“，或直接放棄這部分，這并沒(méi)有問(wèn)題，因?yàn)椴挥?Render 函數(shù)，照樣可以寫出優(yōu)秀的 Vue.js 程序。不過(guò)，Render 函數(shù)并沒(méi)有想象中的那么復(fù)雜，只是配置項(xiàng)特別多，一時(shí)難以記住，但歸根到底，Render 函數(shù)只有 3 個(gè)參數(shù)。
來(lái)看一組 template 和 Render 寫法的對(duì)照：
這里的?h，即?createElement，是 Render 函數(shù)的核心?？梢钥吹?，template 中的?v-if / v-else?等指令，都被 JS 的?if / else?替代了，那?v-for?自然也會(huì)被?for?語(yǔ)句替代。
h 有 3 個(gè)參數(shù)，分別是：
要渲染的元素或組件，可以是一個(gè) html 標(biāo)簽、組件選項(xiàng)或一個(gè)函數(shù)（不常用），該參數(shù)為必填項(xiàng)。示例：
對(duì)應(yīng)屬性的數(shù)據(jù)對(duì)象，比如組件的 props、元素的 class、綁定的事件、slot、自定義指令等，該參數(shù)是可選的，上文所說(shuō)的 Render 配置項(xiàng)多，指的就是這個(gè)參數(shù)。該參數(shù)的完整配置和示例，可以到 Vue.js 的文檔查看，沒(méi)必要全部記住。
子節(jié)點(diǎn)，可選，String 或 Array，它同樣是一個(gè) h。示例：
render函數(shù)的約束
所有的組件樹(shù)中，如果 vNode 是組件或含有組件的 slot，那么 vNode 必須唯一。以下兩個(gè)示例都是錯(cuò)誤的
重復(fù)渲染多個(gè)組件或元素，可以通過(guò)一個(gè)循環(huán)和工廠函數(shù)來(lái)解決：
Render 函數(shù)使用場(chǎng)景
上文說(shuō)到，一般情況下是不推薦直接使用 Render 函數(shù)的，使用 template 足以，在 Vue.js 中，使用 Render 函數(shù)的場(chǎng)景，主要有以下 4 點(diǎn)：
使用兩個(gè)相同 slot。在 template 中，Vue.js 不允許使用兩個(gè)相同的 slot，比如下面的示例是錯(cuò)誤的:
可以使用一個(gè)深度克隆 VNode 節(jié)點(diǎn)的方法。
在 SSR 環(huán)境（服務(wù)端渲染），如果不是常規(guī)的 template 寫法，比如通過(guò) Vue.extend 和 new Vue 構(gòu)造來(lái)生成的組件實(shí)例，是編譯不過(guò)的，在 SSR 中會(huì)報(bào)錯(cuò)。此時(shí)需要使用render函數(shù)來(lái)解決。
在 runtime 版本的 Vue.js 中，如果使用 Vue.extend 手動(dòng)構(gòu)造一個(gè)實(shí)例，使用 template 選項(xiàng)是會(huì)報(bào)錯(cuò)的。解決方案也很簡(jiǎn)單，把 template 改寫為 Render 就可以了。需要注意的是，在開(kāi)發(fā)獨(dú)立組件時(shí)，可以通過(guò)配置 Vue.js 版本來(lái)使 template 選項(xiàng)可用，但這是在自己的環(huán)境，無(wú)法保證使用者的 Vue.js 版本，所以對(duì)于提供給他人用的組件，是需要考慮兼容 runtime 版本和 SSR 環(huán)境的。
一個(gè) Vue.js 組件，有一部分內(nèi)容需要從父級(jí)傳遞來(lái)顯示，如果是文本之類的，直接通過(guò)?
props?就可以，如果這個(gè)內(nèi)容帶有樣式或復(fù)雜一點(diǎn)的 html 結(jié)構(gòu)，可以使用?v-html?指令來(lái)渲染，父級(jí)傳遞的仍然是一個(gè) HTML Element 字符串，不過(guò)它僅僅是能解析正常的 html 節(jié)點(diǎn)且有 XSS 風(fēng)險(xiǎn)。當(dāng)需要最大化程度自定義顯示內(nèi)容時(shí)，就需要?Render?函數(shù)，它可以渲染一個(gè)完整的 Vue.js 組件。你可能會(huì)說(shuō)，用 slot 不就好了？的確，slot 的作用就是做內(nèi)容分發(fā)的，但在一些特殊組件中，可能 slot 也不行。比如一個(gè)表格組件?Table，它只接收兩個(gè) props：列配置 columns 和行數(shù)據(jù) data，不過(guò)某一列的單元格，不是只將數(shù)據(jù)顯示出來(lái)那么簡(jiǎn)單，可能帶有一些復(fù)雜的操作，這種場(chǎng)景只用 slot 是不行的，沒(méi)辦法確定是那一列的 slot。此時(shí)需要使用render函數(shù)就是一種解決方案。
結(jié)尾
? ? ? ? 好了，以上就是關(guān)于VUE組件Vue組件之render函數(shù)，大家有什么疑問(wèn)的歡迎在下面評(píng)論留言喔~
