W3Cschool
恭喜您成為首批注冊(cè)用戶
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
為了學(xué)習(xí)如何更好地使用 Vue,不需要閱讀本頁,但是它提供了更多信息,如果你想知道渲染在背后是如何工作的。
現(xiàn)在我們知道了偵聽器是如何更新組件的,你可能會(huì)問這些更改最終是如何應(yīng)用到 DOM 中的!也許你以前聽說過虛擬 DOM,包括 Vue 在內(nèi)的許多框架都使用這種方式來確保我們的接口能夠有效地反映我們?cè)?JavaScript 中更新的更改
我們用 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)行高效的更新!
Copyright©2021 w3cschool編程獅|閩ICP備15016281號(hào)-3|閩公網(wǎng)安備35020302033924號(hào)
違法和不良信息舉報(bào)電話:173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號(hào)
聯(lián)系方式:
更多建議: