這篇“vue采用vdom有什么好處”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“vue采用vdom有什么好處”文章吧。

創(chuàng)新互聯(lián)公司專注于網(wǎng)站建設(shè)|成都網(wǎng)站維護(hù)公司|優(yōu)化|托管以及網(wǎng)絡(luò)推廣，積累了大量的網(wǎng)站設(shè)計(jì)與制作經(jīng)驗(yàn)，為許多企業(yè)提供了網(wǎng)站定制設(shè)計(jì)服務(wù)，案例作品覆蓋成都航空箱等行業(yè)。能根據(jù)企業(yè)所處的行業(yè)與銷售的產(chǎn)品，結(jié)合品牌形象的塑造，量身策劃品質(zhì)網(wǎng)站。

1. 虛擬dom是什么

虛擬dom顧名思義就是虛擬的dom對(duì)象，它本身就是?個(gè) JavaScript 對(duì)象，只不過它是通過不同的屬性去 描述?個(gè)視圖結(jié)構(gòu)。

2. 引入vdom的好處

1. 將真實(shí)元素節(jié)點(diǎn)抽象成 VNode，有效減少直接操作 dom 次數(shù)，從而提高程序性能

• 創(chuàng)建真實(shí)DOM的代價(jià)高：直接操作 dom 是有限制的，比如：diff、clone 等操作，?個(gè)真實(shí)元素上有許多的內(nèi)容，如果直接對(duì)其進(jìn)行 diff 操作，會(huì)去額外 diff ?些沒有必要的內(nèi)容；同樣的，如果需要進(jìn)行 clone 那么需要將其全部?jī)?nèi)容進(jìn)行復(fù)制，這也是沒必要的。但是，如果將這些操作轉(zhuǎn)移到 JavaScript 對(duì)象上，那么就會(huì)變得簡(jiǎn)單了。

• 觸發(fā)多次瀏覽器重繪及回流：操作 dom 是比較昂貴的操作，頻繁的dom操作容易引起頁(yè)面的重繪和回流，但是通過抽象 VNode 進(jìn)行中間處理，可以有效減少直接操作dom的次數(shù)，從而減少頁(yè)面重繪和回流。

2. 方便實(shí)現(xiàn)跨平臺(tái)

• 同一VNode 節(jié)點(diǎn)可以渲染成不同平臺(tái)上的對(duì)應(yīng)的內(nèi)容，比如：渲染在瀏覽器是 dom 元素節(jié)點(diǎn)，渲染在 Native( iOS、Android) 變?yōu)閷?duì)應(yīng)的控件、可以實(shí)現(xiàn) SSR(Nuxt.js/Next.js)、原生應(yīng)用(Weex/React Native)、小程序(mpvue/uni-app)等 、渲染到 WebGL 中等等。

• Vue3 中允許開發(fā)者基于 VNode 實(shí)現(xiàn)自定義渲染器（renderer），以便于針對(duì)不同平臺(tái)進(jìn)行渲染

補(bǔ)充：vue 為什么采用 vdom？

• 引入 Virtual DOM 在性能方面的考量?jī)H僅是一方面。

  性能受場(chǎng)景的影響是非常大的，不同的場(chǎng)景可能造成不同實(shí)現(xiàn)方案之間成倍的性能差距，所以依賴細(xì)粒度綁定及 Virtual DOM 哪個(gè)的性能更好還真不是一個(gè)容易下定論的問題。

• Vue 之所以引入了 Virtual DOM，更重要的原因是為了解耦 HTML依賴，這帶來兩個(gè)非常重要的好處是：

• 不再依賴 HTML 解析器進(jìn)行模版解析，可以進(jìn)行更多的 AOT 工作提高運(yùn)行時(shí)效率：通過模版 AOT 編譯，Vue 的運(yùn)行時(shí)體積可以進(jìn)一步壓縮，運(yùn)行時(shí)效率可以進(jìn)一步提升；

• 可以渲染到 DOM 以外的平臺(tái)，實(shí)現(xiàn) SSR、同構(gòu)渲染這些高級(jí)特性，Weex等框架應(yīng)用的就是這一特性。

綜上，Virtual DOM 在性能上的收益并不是最主要的，更重要的是它使得 Vue 具備了現(xiàn)代框架應(yīng)有的高級(jí)特性。

3. vdom如何生成，又如何成為真實(shí)dom

在vue中我們常常會(huì)為組件編寫模板 - template， 這個(gè)模板會(huì)被編譯器 - compiler編譯為渲 染函數(shù)，在接下來的掛載（mount）過程中會(huì)調(diào)用render函數(shù)，返回的對(duì)象就是虛擬dom。但它們還不是真正的dom，所以會(huì)在后續(xù)的patch過程中進(jìn)?步轉(zhuǎn)化為dom。

4. 在后續(xù)的diff中的作用

掛載過程結(jié)束后，vue程序進(jìn)入更新流程。如果某些響應(yīng)式數(shù)據(jù)發(fā)生變化，將會(huì)引起組件重新render，此時(shí)就會(huì)生成新的vdom，和上一次的渲染結(jié)果diff就能得到變化的地方，從而轉(zhuǎn)換為最小量的dom操作，高效更新視圖。

以上就是關(guān)于“vue采用vdom有什么好處”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)頁(yè)題目：vue采用vdom有什么好處
文章來源：http://jinyejixie.com/article22/iieecc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、定制開發(fā)、小程序開發(fā)、建站公司、面包屑導(dǎo)航、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)