探究Vue.js 2.0新增的虛擬DOM

更新時(shí)間：2016年10月20日 10:16:57 作者：QAQMiao

vue.js 2.0大家對(duì)此并不陌生吧。最令人興奮的是更新頁(yè)面的"虛擬DOM"的加入。那么對(duì)于虛擬 DOM 可以做什么呢？今天小編通過(guò)本文給大家解答下

你可能早就已經(jīng)聽說(shuō)了 Vue.js 2.0。一個(gè)主要的令人興奮的新特性就是更新頁(yè)面的"虛擬DOM"的加入。

虛擬 DOM 可以做什么？

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

更新DOM的花費(fèi)時(shí)間非常長(zhǎng)

當(dāng)我們使用 JavaScript 來(lái)改變頁(yè)面的時(shí)候，瀏覽器不得不做一些工作來(lái)找到需要的DOM節(jié)點(diǎn)，并且做出類似這樣的改變：

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

在如今的應(yīng)用程序的DOM中大概有成千上萬(wàn)的節(jié)點(diǎn)，因此更新所花費(fèi)的時(shí)間就更長(zhǎng)了。有很多不可避免的很小很頻繁的更新拖慢了頁(yè)面的速度。

我們可以使用 JavaScript 將DOM節(jié)點(diǎn)虛擬化表示

在一個(gè)HTML中，DOM節(jié)點(diǎn)通常表示如下：

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

DOM 節(jié)點(diǎn)也可以表示 JavaScript 中的對(duì)象，像這樣：

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

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

更新虛擬節(jié)點(diǎn)的開銷不大

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

如果我們使用虛擬DOM，而不是直接在代碼中調(diào)用類似 .getElementById 的 DOM API 方法，操作就會(huì)像改變 JS 對(duì)象一樣非常的簡(jiǎn)單省時(shí)。

接下來(lái)，就是同步的把我們做的改變更新到真實(shí)DOM 中去，我們使用了一個(gè)很有效率的函數(shù)：

// 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，這挺好的…對(duì)吧？

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

大小 - 其中之一就是更多的功能意味著代碼包中更多行的代碼。幸運(yùn)的是，Vue.js 2.0 依舊比較小（當(dāng)前版本 21.4kb），并且也正在刪除很多東西。

內(nèi)存 -同樣，虛擬DOM需要將現(xiàn)有的DOM拷貝后保存在內(nèi)存中，這是一個(gè)在DOM更新速度和內(nèi)存使用中的權(quán)衡。

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

因此，如果某個(gè)項(xiàng)目只有較少數(shù)量的節(jié)點(diǎn)，那么使用虛擬DOM會(huì)帶來(lái)速度上質(zhì)的變化么？實(shí)際上更可能的是使其更慢了！

但是對(duì)于多數(shù)的單頁(yè)面應(yīng)用來(lái)說(shuō)，它還是會(huì)帶來(lái)提升的。

不僅僅是性能

使用虛擬DOM不僅僅是一次性能上的優(yōu)化，還意味著帶來(lái)了更多的功能。

例如，你可以使用虛擬DOM通過(guò) render() 方法直接創(chuàng)建新節(jié)點(diǎn)：

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>

為什么做這個(gè)？它為你的JavaScript帶來(lái)了全編程能力。你可以通過(guò)使用JavaScript的數(shù)組方法來(lái)創(chuàng)建工廠化函數(shù)來(lái)搭建你的虛擬節(jié)點(diǎn)等等，這些用模板語(yǔ)法處理起來(lái)可能會(huì)更復(fù)雜。

以上所述是小編給大家介紹的Vue.js 2.0新增的虛擬DOM的知識(shí)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: