你可能早就已經聽說了 Vue.js 2.0。一個主要的令人興奮的新特性就是更新頁面的"虛擬DOM"的加入。

虛擬 DOM 可以做什么？

React 和 Ember 都使用了虛擬DOM來提升頁面的刷新速度。為了理解其如何工作，讓我們先討論一下幾個概念：

更新DOM的花費時間非常長

當我們使用 JavaScript 來改變頁面的時候，瀏覽器不得不做一些工作來找到需要的DOM節點，并且做出類似這樣的改變：

document.getElementById('myId').appendChild(myNewNode);

在如今的應用程序的DOM中大概有成千上萬的節點，因此更新所花費的時間就更長了。有很多不可避免的很小很頻繁的更新拖慢了頁面的速度。

我們可以使用 JavaScript 將DOM節點虛擬化表示

在一個HTML中，DOM節點通常表示如下：

<ul id='myId'><li>Item 1</li><li>Item 2</li><ul>

DOM 節點也可以表示 JavaScript 中的對象，像這樣：

// Pseudo-code of a DOM node represented as JavascriptLet domNode = {tag: 'ul'attributes: { id: 'myId' }children: [// where the LI's would go]};

這就是我們的“虛擬”DOM。

更新虛擬節點的開銷不大

// This might be how we update the virtual DOMdomNode.children.push('<ul>Item 3</ul>');

如果我們使用虛擬DOM，而不是直接在代碼中調用類似 .getElementById 的 DOM API 方法，操作就會像改變 JS 對象一樣非常的簡單省時。

接下來，就是同步的把我們做的改變更新到真實DOM 中去，我們使用了一個很有效率的函數：

// This function would call the DOM API and make changes// to the "real" DOM. It would do it in batches and with// more efficiency than it would with arbitrary updates.sync(originalDomNode, domNode);

Vue.js 在版本2中加入了虛擬DOM，這挺好的…對吧？

就像在生活和 Web 開發中的每一件事，虛擬DOM有利也有弊。

大小 - 其中之一就是更多的功能意味著代碼包中更多行的代碼。幸運的是，Vue.js 2.0 依舊比較?。ó斍鞍姹?21.4kb），并且也正在刪除很多東西。

內存 -同樣，虛擬DOM需要將現有的DOM拷貝后保存在內存中，這是一個在DOM更新速度和內存使用中的權衡。

并不適用所有情況 -如果虛擬DOM可以一次性進行批量的修改是非常好的。但是如果是單獨的、稀少的更新呢？這樣的任何DOM更新都將會使虛擬DOM帶來無意義的預計算。

因此，如果某個項目只有較少數量的節點，那么使用虛擬DOM會帶來速度上質的變化么？實際上更可能的是使其更慢了！

但是對于多數的單頁面應用來說，它還是會帶來提升的。

不僅僅是性能

使用虛擬DOM不僅僅是一次性能上的優化，還意味著帶來了更多的功能。

例如，你可以使用虛擬DOM通過 render() 方法直接創建新節點：

new Vue({el: '#app',data: {message: 'hello world'},render() {var node = this.$createElement;return node('div', { attrs: { id: 'myId' } }, this.message);}});

輸出:

<div id='app'><div id='myId'>hello world</div></div>

為什么做這個？它為你的JavaScript帶來了全編程能力。你可以通過使用JavaScript的數組方法來創建工廠化函數來搭建你的虛擬節點等等，這些用模板語法處理起來可能會更復雜。

以上所述是小編給大家介紹的Vue.js 2.0新增的虛擬DOM的知識，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！