這篇“vue采用vdom有什么好處”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“vue采用vdom有什么好處”文章吧。
創(chuàng)新互聯(lián)公司專注于網(wǎng)站建設(shè)|成都網(wǎng)站維護公司|優(yōu)化|托管以及網(wǎng)絡(luò)推廣，積累了大量的網(wǎng)站設(shè)計與制作經(jīng)驗，為許多企業(yè)提供了網(wǎng)站定制設(shè)計服務(wù)，案例作品覆蓋成都航空箱等行業(yè)。能根據(jù)企業(yè)所處的行業(yè)與銷售的產(chǎn)品，結(jié)合品牌形象的塑造，量身策劃品質(zhì)網(wǎng)站。
虛擬dom顧名思義就是虛擬的dom對象，它本身就是?個 JavaScript 對象，只不過它是通過不同的屬性去 描述?個視圖結(jié)構(gòu)。
1. 將真實元素節(jié)點抽象成 VNode，有效減少直接操作 dom 次數(shù)，從而提高程序性能
創(chuàng)建真實DOM的代價高：直接操作 dom 是有限制的，比如：diff、clone 等操作，?個真實元素上有許多的內(nèi)容，如果直接對其進行 diff 操作，會去額外 diff ?些沒有必要的內(nèi)容；同樣的，如果需要進行 clone 那么需要將其全部內(nèi)容進行復(fù)制，這也是沒必要的。但是，如果將這些操作轉(zhuǎn)移到 JavaScript 對象上，那么就會變得簡單了。
觸發(fā)多次瀏覽器重繪及回流：操作 dom 是比較昂貴的操作，頻繁的dom操作容易引起頁面的重繪和回流，但是通過抽象 VNode 進行中間處理，可以有效減少直接操作dom的次數(shù)，從而減少頁面重繪和回流。
2. 方便實現(xiàn)跨平臺
同一VNode 節(jié)點可以渲染成不同平臺上的對應(yīng)的內(nèi)容，比如：渲染在瀏覽器是 dom 元素節(jié)點，渲染在 Native( iOS、Android) 變?yōu)閷?yīng)的控件、可以實現(xiàn) SSR(Nuxt.js/Next.js)、原生應(yīng)用(Weex/React Native)、小程序(mpvue/uni-app)等 、渲染到 WebGL 中等等。
Vue3 中允許開發(fā)者基于 VNode 實現(xiàn)自定義渲染器（renderer），以便于針對不同平臺進行渲染
補充：vue 為什么采用 vdom？
引入 Virtual DOM 在性能方面的考量僅僅是一方面。
性能受場景的影響是非常大的，不同的場景可能造成不同實現(xiàn)方案之間成倍的性能差距，所以依賴細粒度綁定及 Virtual DOM 哪個的性能更好還真不是一個容易下定論的問題。
Vue 之所以引入了 Virtual DOM，更重要的原因是為了解耦 HTML依賴，這帶來兩個非常重要的好處是：
不再依賴 HTML 解析器進行模版解析，可以進行更多的 AOT 工作提高運行時效率：通過模版 AOT 編譯，Vue 的運行時體積可以進一步壓縮，運行時效率可以進一步提升；
可以渲染到 DOM 以外的平臺，實現(xiàn) SSR、同構(gòu)渲染這些高級特性，Weex等框架應(yīng)用的就是這一特性。
綜上，
Virtual DOM在性能上的收益并不是最主要的，更重要的是它使得Vue具備了現(xiàn)代框架應(yīng)有的高級特性。
在vue中我們常常會為組件編寫模板 - template， 這個模板會被編譯器 - compiler編譯為渲 染函數(shù)，在接下來的掛載（mount）過程中會調(diào)用render函數(shù)，返回的對象就是虛擬dom。但它們還不是真正的dom，所以會在后續(xù)的patch過程中進?步轉(zhuǎn)化為dom。
掛載過程結(jié)束后，vue程序進入更新流程。如果某些響應(yīng)式數(shù)據(jù)發(fā)生變化，將會引起組件重新render，此時就會生成新的vdom，和上一次的渲染結(jié)果diff就能得到變化的地方，從而轉(zhuǎn)換為最小量的dom操作，高效更新視圖。
以上就是關(guān)于“vue采用vdom有什么好處”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
