什么是 DOM？

如果我們把這個(gè) HTML 加載到瀏覽器中，瀏覽器創(chuàng)建這些節(jié)點(diǎn)，用來(lái)顯示網(wǎng)頁(yè)。所以這個(gè)HTML映射到一系列DOM節(jié)點(diǎn)，然后我們可以使用JavaScript進(jìn)行操作。例如：

let item = document.getElementByTagName('h1')[0]
item.textContent = "New Heading"

VDOM

網(wǎng)頁(yè)可以有很多DOM節(jié)點(diǎn)，這意味著DOM樹可以有數(shù)千個(gè)節(jié)點(diǎn)。這就是為什么我們有像Vue這樣的框架，幫我們干這些重活兒，并進(jìn)行大量的JavaScript調(diào)用。

然而，搜索和更新數(shù)千個(gè)DOM節(jié)點(diǎn)很明顯會(huì)變慢。這就是Vue和其他類似框架有一種叫做虛擬DOM的東西。虛擬DOM是表示DOM的一種方式。例如，這個(gè)HTML也可以通過(guò)一個(gè)虛擬節(jié)點(diǎn)來(lái)表示，看起來(lái)像這樣。如您所見，它只是一個(gè)JavaScript對(duì)象。

<div>Hello</div>

{
 tag: 'div',
 children: [
 {
 text: 'Hello'
 }
 ]
}

Vue知道如何使用此虛擬節(jié)點(diǎn)并掛載到DOM上，它會(huì)更新我們?cè)跒g覽器中看到的內(nèi)容。實(shí)際上還有一個(gè)步驟其中，Vue基于我們的模板創(chuàng)建一個(gè)渲染函數(shù)，返回一個(gè)虛擬DOM節(jié)點(diǎn)。

渲染函數(shù)可以是這樣的:

render(h) {
 return h('div', 'hello')
}

當(dāng)組件更改時(shí)，Render函數(shù)將重新運(yùn)行，它將創(chuàng)建另一個(gè)虛擬節(jié)點(diǎn)。然后發(fā)送舊的 VNode 和新的 VNode 到Vue中進(jìn)行比較并以最高效的方式在我們的網(wǎng)頁(yè)上更新。

我們可以將虛擬DOM和實(shí)際DOM的關(guān)系類比為藍(lán)圖和實(shí)際建筑的關(guān)系。假設(shè)我更改了29樓的一些數(shù)據(jù)。我改變了家具的布局還加了一些櫥柜。我有兩種方法可以改變。首先，我可以拆除29樓的一切從頭開始重建?；蛘呶铱梢詣?chuàng)造新的藍(lán)圖，比較新舊藍(lán)圖并進(jìn)行更新以盡可能減少工作量。這就是虛擬DOM的工作原理。Vue 3讓這些更新更快并且更高效。

核心模塊

Vue 的三個(gè)核心模塊：

• Reactivity Module 響應(yīng)式模塊
• Compiler Module 編譯器模塊
• Renderer Module 渲染模塊

響應(yīng)式模塊允許我們創(chuàng)建 JavaScript 響應(yīng)對(duì)象并可以觀察其變化。當(dāng)使用這些對(duì)象的代碼運(yùn)行時(shí)，它們會(huì)被跟蹤，因此，它們可以在響應(yīng)對(duì)象發(fā)生變化后運(yùn)行。

編譯器模塊獲取 HTML 模板并將它們編譯成渲染函數(shù)。這可能在運(yùn)行時(shí)在瀏覽器中發(fā)生，但在構(gòu)建 Vue 項(xiàng)目時(shí)更常見。這樣瀏覽器就可以只接收渲染函數(shù)。

渲染模塊的代碼包含在網(wǎng)頁(yè)上渲染組件的三個(gè)不同階段：

• 渲染階段
• 掛載階段
• 補(bǔ)丁階段

在渲染階段，將調(diào)用 render 函數(shù)，它返回一個(gè)虛擬 DOM 節(jié)點(diǎn)。
在掛載階段，使用虛擬DOM節(jié)點(diǎn)并調(diào)用 DOM API 來(lái)創(chuàng)建網(wǎng)頁(yè)。
在補(bǔ)丁階段，渲染器將舊的虛擬節(jié)點(diǎn)和新的虛擬節(jié)點(diǎn)進(jìn)行比較并只更新網(wǎng)頁(yè)變化的部分。

現(xiàn)在讓我們來(lái)看一個(gè)例子，一個(gè)簡(jiǎn)單組件的執(zhí)行。它有一個(gè)模板，以及在模板內(nèi)部使用的響應(yīng)對(duì)象。首先，模板編譯器將 HTML 轉(zhuǎn)換為一個(gè)渲染函數(shù)。然后初始化響應(yīng)對(duì)象，使用響應(yīng)式模塊。接下來(lái)，在渲染模塊中，我們進(jìn)入渲染階段。這將調(diào)用 render 函數(shù)，它引用了響應(yīng)對(duì)象。我們現(xiàn)在監(jiān)聽這個(gè)響應(yīng)對(duì)象的變化，render 函數(shù)返回一個(gè)虛擬 DOM 節(jié)點(diǎn)。接下來(lái)，在掛載階段，調(diào)用 mount 函數(shù)使用虛擬 DOM 節(jié)點(diǎn)創(chuàng)建 web 頁(yè)面。最后，如果我們的響應(yīng)對(duì)象發(fā)生任何變化，正在被監(jiān)視，渲染器再次調(diào)用render函數(shù)，創(chuàng)建一個(gè)新的虛擬DOM節(jié)點(diǎn)。新的和舊的虛擬DOM節(jié)點(diǎn)，發(fā)送到補(bǔ)丁函數(shù)中，然后根據(jù)需要更新我們的網(wǎng)頁(yè)。

渲染器機(jī)制

擁有虛擬DOM層有一些好處，最重要的是它讓組件的渲染邏輯完全從真實(shí)DOM中解耦，并讓它更直接地重用框架的運(yùn)行時(shí)在其他環(huán)境中。例如，Vue允許第三方開發(fā)人員創(chuàng)建自定義渲染解決方案目標(biāo)，不僅僅是瀏覽器也包括IOS和Android等原生環(huán)境，也可以使用API創(chuàng)建自定義渲染器直接渲染到WebGL而不是DOM節(jié)點(diǎn)。在Vue 2中我們實(shí)際上已經(jīng)有了這種能力但是，我們?cè)赩ue 2中提供的API沒有正式記錄并且需要分叉源代碼。所以這給維護(hù)帶來(lái)了很大的負(fù)擔(dān)，對(duì)開發(fā)這些定制解決方案的開發(fā)人員在Vue 3中，我們讓自定義渲染器API成為一等公民。因此開發(fā)人員可以直接拉取Vue運(yùn)行時(shí)核心作為依賴項(xiàng)，然后利用自定義渲染器API構(gòu)建自己的自定義渲染器。事實(shí)上，我們已經(jīng)有了早期用戶報(bào)告他們已經(jīng)成功地構(gòu)建了一個(gè)使用Vue 3 API關(guān)于虛擬DOM的WebGL渲染器。

另一個(gè)重要方面，它提供了能力以編程方式構(gòu)造、檢查、克隆以及操作所需的DOM結(jié)構(gòu)，在實(shí)際返回渲染引擎之前你可以利用JavaScript的全部能力做到這些。這個(gè)能力很重要，因?yàn)榭倳?huì)有某些情況在UI編程中使用模板語(yǔ)法會(huì)有一些限制，你只需要一種有充分靈活性的合適的編程語(yǔ)言來(lái)表達(dá)潛在的邏輯?，F(xiàn)在，這種情況實(shí)際上是相當(dāng)罕見的在日常UI開發(fā)中。但當(dāng)你在創(chuàng)作一個(gè)庫(kù)的時(shí)候，這種情況更常見或編寫UI組件套件，你打算上傳供第三方開發(fā)者使用。讓我們想象一下一個(gè)，像復(fù)雜類型的頂部框這樣的組件或者一個(gè)與一堆文本相關(guān)聯(lián)的輸入框，這些類型的組件通常包含很少的標(biāo)記，但它們將包含很多交互邏輯在這些情況下，模板語(yǔ)法有時(shí)候會(huì)限制你更容易地表達(dá)潛在的邏輯，或者有時(shí)候你會(huì)發(fā)現(xiàn)自己在模板中加入了很多邏輯，但你還是有很多邏輯在JavaScript 中而 render 函數(shù)允許你把這些邏輯組合在一個(gè)地方你通常不需要想太多關(guān)于這些情況下的標(biāo)記。

所以我理解是模板會(huì)完成你要做的事在99%的情況下你只需要寫出HTML就好了，但偶爾可能想做些更可控的事情在，你需要編寫一個(gè)渲染函數(shù)。Vue 2中的渲染函數(shù)如下所示，

render(h) {
 return h (
 'div', {
 attrs: {
 id: foo
 },
 on: {
 click: this.onClick
 },
 'hello'
 })
}

所以這是組件定義中的一個(gè)選項(xiàng)，相對(duì)于提供一個(gè) template 選項(xiàng)，在 Vue 2 中你可以為組件提供一個(gè)渲染函數(shù)，你會(huì)得到 h 參數(shù)，直接作為渲染函數(shù)的參數(shù)。你可以用它來(lái)創(chuàng)造我們稱之為虛擬DOM節(jié)點(diǎn)，簡(jiǎn)稱 vnode。

vnode 接受三個(gè)參數(shù)：

• 第一個(gè)參數(shù)是類型，所以我們?cè)谶@里創(chuàng)建一個(gè) div。
• 第二個(gè)參數(shù)是一個(gè)對(duì)象包含 vnode 上的所有數(shù)據(jù)或?qū)傩?，API有點(diǎn)冗長(zhǎng)從某種意義上說(shuō)，你必須指明傳遞給節(jié)點(diǎn)的綁定類型。例如，如果要綁定屬性你必須把它嵌套在attrs對(duì)象下如果要綁定事件偵聽器你得把它列在 on 下面。
• 第三個(gè)參數(shù)是這個(gè) vnode 的子節(jié)點(diǎn)。所以直接傳遞一個(gè)字符串是一個(gè)方便的 API，表明此節(jié)點(diǎn)只包含文本子節(jié)點(diǎn)，但它也可以是包含更多子節(jié)點(diǎn)的數(shù)組。所以你可以在這里有一個(gè)數(shù)組并且嵌套了更多的嵌套 h 調(diào)用。

在Vue 3中我們改變了API，目標(biāo)是簡(jiǎn)化它。

import { h } from 'vue'
 
render () {
 return h(
 'div', 
 {
 id: 'foo',
 onClick: this.onClick
 },
 'hello'
 })
}

第一個(gè)顯著的變化是我們現(xiàn)在有了一個(gè)扁平的 props 結(jié)構(gòu)。當(dāng)你調(diào)用 h 時(shí)，第二個(gè)參數(shù)現(xiàn)在總是一個(gè)扁平的對(duì)象。你可以直接給它傳遞一個(gè)屬性，這里我們只是給它一個(gè) ID。按慣例監(jiān)聽器以 on 開頭，所以任何帶 on 的都會(huì)自動(dòng)綁定為一個(gè)監(jiān)聽器所以你不必考慮太多嵌套的問題。

在大多數(shù)情況下，你也不需要思考是應(yīng)將其作為 attribute 綁定還是DOM屬性綁定，因?yàn)?Vue 將智能地找出為你做這件事的最好方法。我們檢查這個(gè) key 是否作為屬性存在在原生 DOM 中。如果存在，我們會(huì)將其設(shè)置為 property，如果它不存在，我們將它設(shè)置為一個(gè)attribute。

render API 的另一項(xiàng)改動(dòng)是 h helper 現(xiàn)在是直接從 Vue 本身全局導(dǎo)入的。一些用戶在 Vue 2 中因?yàn)?h 在這里傳遞而在這里面 h 又很特別，因?yàn)樗壎ǖ疆?dāng)前組件實(shí)例。當(dāng)你想拆分一個(gè)大的渲染函數(shù)時(shí)，你必須把這個(gè) h 函數(shù)一路傳遞給這些分割函數(shù)。所以，這有點(diǎn)困難，但有了全局引入的 h 你導(dǎo)入一次就可以分割你的渲染函數(shù)，在同一個(gè)文件里分割多少個(gè)都行。

渲染函數(shù)不再有 h 參數(shù)了，在內(nèi)部它確實(shí)接收參數(shù)，但這只是編譯器使用的用來(lái)生成代碼。當(dāng)用戶直接使用時(shí)，他們不需要這個(gè)參數(shù)。所以，如果你用 TypeScript 使用定義的組件 API 你也會(huì)得到 this 的完整類型推斷。

Q&A

1.我知道原始的那種虛擬 Dom 的實(shí)現(xiàn)得到了啟發(fā)來(lái)自其他項(xiàng)目對(duì)嗎？

是的有一個(gè)庫(kù)叫snabbdomVue 2基本上就是從這個(gè)庫(kù)中分離出來(lái)的。

2.好的然后是Vue 3，你在這里的編碼方式只是改進(jìn)了Vue 2的模式嗎？

好吧，Vue 3是一個(gè)徹底的重寫，幾乎從頭開始一切都是定制的顯然，有現(xiàn)有的算法看起來(lái)像沒有變化，因?yàn)檫@些是我們看到社區(qū)在做廣泛研究的領(lǐng)域所以這是建立在所有這些以前的實(shí)現(xiàn)的基礎(chǔ)上的但代碼本身現(xiàn)在是從頭開始。

3.都是用TypeScript寫的，對(duì)吧？

是的，都是 TypeScript 寫的。

何時(shí)/如何使用 render 函數(shù)

看看渲染函數(shù)在 Vue 中是什么樣子。在 Vue 2 中，一個(gè)傳統(tǒng)的 Vue 組件，有一個(gè) template 選項(xiàng)，但是為了重用渲染函數(shù)我們可以用一個(gè)名為 render 的函數(shù)來(lái)代替它，我們會(huì)通過(guò)參數(shù)得到這個(gè)稱為 h（hyperscript）。但在這里，我們只是示范一下我們?nèi)绾卧?Vue 3 中使用它。我們會(huì)從 vue 導(dǎo)入 h，我們可以用它來(lái)返回 h。

import { h } from 'vue'
 
const App = {
 render () {
 return h('div') 
 }
}
 
// 等效模板中的普通 div

1.所以它返回 div 的 JavaScript 對(duì)象表示？

完全正確。

2.那么，你的虛擬dom就像…編譯器？是編譯器接收它嗎？

是渲染器，渲染器接收它。

3.然后它實(shí)際上進(jìn)行 dom 調(diào)用將其帶入瀏覽器？

完全正確。

所以我們可以給這個(gè)虛擬節(jié)點(diǎn)一些 props，

import { h } from 'vue'
 
const App = {
 render () {
 return h(
 'div',
 {
 id: 'hello'
 },
 [
 h('span','world')
 ]
 ) 
 }
}
 
// <div id="hello"><span>world</span></div>

現(xiàn)在，我們知道如何生成靜態(tài)結(jié)構(gòu)。但是當(dāng)人們第一次使用 render 函數(shù)會(huì)問 “我該怎么寫，比如說(shuō)，v-if 或者 v-for”？我們沒有像 v-if 或者類似的東西。相反，您可以直接使用 JavaScript。

import { h } from 'vue'
 
const App = {
 render () {
 return this.ok
 ? h('div',{ id: 'hello' },[h('span','world')]
 : h('p', 'other branch')
 ) 
 }
}

如果 ok 的值為 true，它將呈現(xiàn) div，反之，它將呈現(xiàn) p。同樣，如果你想做 v-else-if 你需要嵌套這個(gè)三元表達(dá)式:

import { h } from 'vue'
 
const App = {
 render () {
 return this.ok
 ? h('div',{ id: 'hello' },[h('span','world')]
 : this.otherCondition
 ? h('p', 'other branch')
 : h('span')
 ) 
 }
}

我想你可能會(huì)喜歡創(chuàng)建一個(gè)變量，將不同的節(jié)點(diǎn)添加到該變量。所以當(dāng)你不得不將這整個(gè)東西嵌套在一個(gè)表達(dá)式調(diào)用中這會(huì)很有用，但你不必這么做。

import { h } from 'vue'
 
let nodeToReturn
if(this.ok) {
 nodeToReturn = ...
} else if () {
 
}
 
const App = {
 render () {
 return this.ok
 ? h('div',{ id: 'hello' },[h('span','world')]
 : this.otherCondition
 ? h('p', 'other branch')
 : h('span')
 ) 
 }
}

這就是 JavaScript 靈活的地方，這看起來(lái)更像普通的 JavaScript。當(dāng)你的代碼變得更加復(fù)雜時(shí)您可以使用普通的 JavaScript 重構(gòu)技巧使它們更容易理解。

我們討論了 v-if， 接下來(lái)看看 v-for。 類似的，你也可以給它們加上 key，這是渲染函數(shù)中的渲染列表。

import { h } from 'vue'
 
const App = {
 render () {
 return this.list.map(item => {
 return h('div', {key: item.id}, item.text)
 })) 
 }
}

在渲染函數(shù)中，您可能要處理插槽。當(dāng)你寫一個(gè)重標(biāo)記組件（markup heavy component），或者我更喜歡稱之為特性組件（feature component），它與你的應(yīng)用程序的外觀布局結(jié)構(gòu)有關(guān)，將實(shí)際的 HTML 顯示給用戶。對(duì)于那些類型的組件，我更喜歡始終使用模板。只有在我必須使用渲染函數(shù)的時(shí)候，比如我在寫一些功能型的組件，有時(shí)會(huì)期望獲取一些插槽內(nèi)容，將其打包或者以某種方式操縱他們。在 Vue 3 里默認(rèn)插槽將暴露在這個(gè) this.$slot.default。如果對(duì)于組件什么都沒有提供，這將是 undefined，所以你得先檢查一下它的存在。如果它存在，它將永遠(yuǎn)是一個(gè)數(shù)組。有了作用域槽，我們可以將 props 傳遞給作用域槽，所以把數(shù)據(jù)傳遞到作用域槽只是通過(guò)傳遞一個(gè)參數(shù)到這個(gè)函數(shù)調(diào)用中。因?yàn)檫@是一個(gè)數(shù)組你可以將它直接放在 children 位置。

import { h } from 'vue'
 
const App = {
 render () {
 const slot = this.$slot.default
 ? this.$slot.default()
 : []
 
 return h('div', slot)
 }
}

你可以在 render 函數(shù)中用插槽做一件很強(qiáng)大的事，比如以某種方式操縱插槽，因?yàn)樗皇且粋€(gè) JavaScript 對(duì)象數(shù)組，你可以用 map 遍歷它。

import { h } from 'vue'
 
const App = {
 render () {
 const slot = this.$slot.default
 ? this.$slot.default()
 : []
 
 slot.map(vnode => {
 return h('div', [vnode])
 })
 }
}

這里有一個(gè)例子，截住并更改插槽數(shù)據(jù)。假設(shè)我們有一個(gè)堆棧組件（tack component），在一些用戶界面庫(kù)(UI libraries)中很常見。你可以傳遞很多屬性給它，得到嵌套的堆棧渲染結(jié)果，有點(diǎn)像 HTML 中 ul 和 ol 的默認(rèn)樣式。

<Stack size="4">
 <div>hello</div>
 <Stack size="4">
 <div>hello</div>
 <div>hello</div>
 </Stack>
</Stack>

渲染成這樣：

<div class="stack">
 <div class="mt-4">
 <div>hello</div>
 </div>
 <div class="mt-4">
 <div class="stack">
 <div class="mt-4">
 <div>hello</div>
 </div>
 </div>
 </div>
</div>

這里有一個(gè)普通的基于模板的語(yǔ)法，在同一個(gè)插槽內(nèi)它們都是默認(rèn)插槽，你能做的只有渲染這個(gè)部分，在模板很難實(shí)現(xiàn)。但是你可以用渲染函數(shù)來(lái)實(shí)現(xiàn)，程序化的遍歷插槽內(nèi)的每個(gè)項(xiàng)目然后把它們變成別的東西。

import { h } from 'vue'
 
const Stack = {
 render () {
 const slot = this.$slots.default
 ? this.$slots.default()
 : []
 
 return h(
 'div',
 {class: 'stack'},
 slot.map(child => {
 return h(
  'div', 
  {class: `mt-${this.$props.size}`},
  [child]
  )
 })
 )
 }
}

我們用 slot.map 生成新的 vnode 列表，原來(lái)的子插槽被包裝在里面。有了這個(gè)，我們把它放到一個(gè) stack.html 文件里。

stack.html

<script src="https://unpkg.com/vue@next"></script>
<style>
 .mt-4 {
 margin: 10px
 }
</style>
 
 
<div id="app"></div>
 
<script>
 const { h, createApp } = Vue
 
 const Stack = {
 render() {
 const slot = this.$slots.default
 ? this.$slots.default()
 : []
 
 return h(
 'div',
 { class: 'stack' },
 slot.map(child => {
  return h('div', { class: `mt-${this.$attrs.size}` }, [child])
  // this.$props.size ?
 })
 )
 },
 }
 
 const App = {
 components: {
 Stack
 },
 template: `
 <Stack size="4">
 <div>hello</div>
 <Stack size="4">
 <div>hello</div>
 <div>hello</div>
 </Stack>
 </Stack>
 `
 }
 
 createApp(App).mount('#app')
</script>

當(dāng)你創(chuàng)作這些底層的公用設(shè)施組件，有時(shí)真的會(huì)遇到麻煩，這時(shí)渲染函數(shù)更有效。但話說(shuō)回來(lái)，也需要了解每種方法的利弊，這些是為了讓你更好地理解在什么情況下應(yīng)該使用模板或使用渲染函數(shù)。基本上是當(dāng)你用一個(gè)模板時(shí)遇到限制時(shí)，比如你就像我們剛才看到的那樣，可能改為使用渲染函數(shù)會(huì)更有效。當(dāng)你意識(shí)到想表達(dá)的邏輯用 JavaScript 更容易而不是使用模板語(yǔ)法時(shí)就使用它。從我的經(jīng)驗(yàn)來(lái)看，這種情況在您創(chuàng)作可重用的功能組件，要跨多個(gè)應(yīng)用程序共享或者在組織內(nèi)部共享時(shí)更常見。在日常開發(fā)中你主要是在編寫特性組件，模板通常是有效的方式，模板的好處是更簡(jiǎn)單，當(dāng)你有很多標(biāo)記的時(shí)候會(huì)通過(guò)編譯器優(yōu)化，它的另一個(gè)好處是它更容易讓設(shè)計(jì)師接管組件并用CSS設(shè)計(jì)樣式。因此，Vue 提供了這兩個(gè)選項(xiàng)，當(dāng)情況出現(xiàn)的時(shí)候以便您可以選擇合適的方式。

到此這篇關(guān)于何時(shí)/使用 Vue3 render 函數(shù)的教程詳解的文章就介紹到這了,更多相關(guān)Vue3 render 函數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論