Vue 3.0 渲染機(jī)制和優(yōu)化

2021-07-16 11:43 更新

為了學(xué)習(xí)如何更好地使用 Vue,不需要閱讀本頁,但是它提供了更多信息,如果你想知道渲染在背后是如何工作的。

#虛擬 DOM

現(xiàn)在我們知道了偵聽器是如何更新組件的,你可能會(huì)問這些更改最終是如何應(yīng)用到 DOM 中的!也許你以前聽說過虛擬 DOM,包括 Vue 在內(nèi)的許多框架都使用這種方式來確保我們的接口能夠有效地反映我們?cè)?JavaScript 中更新的更改

點(diǎn)擊此處實(shí)現(xiàn)

我們用 JavaScript 復(fù)制了一個(gè)名為 Virtual Dom 的 DOM,我們這樣做是因?yàn)橛?JavaScript 接觸 DOM 的計(jì)算成本很高。雖然用 JavaScript 執(zhí)行更新很廉價(jià),但是找到所需的 DOM 節(jié)點(diǎn)并用 JS 更新它們的成本很高。所以我們批處理調(diào)用,同時(shí)更改 DOM。

虛擬 DOM 是輕量級(jí)的 JavaScript 對(duì)象,由渲染函數(shù)創(chuàng)建。它包含三個(gè)參數(shù):元素,帶有數(shù)據(jù)的對(duì)象,prop,attr 以及更多,和一個(gè)數(shù)組。數(shù)組是我們傳遞子級(jí)的地方,子級(jí)也具有所有這些參數(shù),然后它們可以具有子級(jí),依此類推,直到我們構(gòu)建完整的元素樹為止。

如果需要更新列表項(xiàng),可以使用前面提到的響應(yīng)性在 JavaScript 中進(jìn)行。然后,我們對(duì) JavaScript 副本,虛擬 DOM 進(jìn)行所有更改,并在此與實(shí)際 DOM 之間進(jìn)行區(qū)分。只有這樣,我們才能對(duì)已更改的內(nèi)容進(jìn)行更新。虛擬 DOM 允許我們對(duì) UI 進(jìn)行高效的更新!

以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)