转自:http://www.cnblogs.com/lvyongbo/p/5931636.html 引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能。其中一个功能就是“Virtual DOM”。 Virtual DOM是什么 在之前,React和Ember早就开始用虚拟DOM技术来提高页面更新的速度了。 若想了解它是如何工作的,就要先认清这几个概念: 1.更新DOM是非常昂贵的操作 当我们使用Javascript来修改我们的页面,浏览器已经做了一些工作,以找到DOM节点进行更改,例如: document.getElementById(‘myId’).appendChild(myNewNode); 在现代的应用中,会有成千上万数量个DOM节点。所以因更新的时候产生的计算非常昂贵。琐碎且频繁的更新会使页面缓慢,同时这也是不可避免的。 2.我们可以用JavaScript对象来代替DOM节点 DOM节点在HTML文档中的表现通常是这样的:
- Item 1
- Item 2
-
DOM节点也可以表示为一个JavaScript对象,就像这样: //用Javascript代码表示DOM节点的伪代码 Let domNode = { tag: ‘ul’ attributes: { id: ‘myId’ } children: [ //这里是 li ] }; 这就是虚拟的DOM节点,很好理解吧。 3.更新虚拟节点, 并不昂贵贵 //更新虚拟DOM的代码 domNode.children.push(‘
- Item 3
hello world为什么这样做?你可以用全编程语言JavaScript编程,您可以创建工厂式的功能来建立虚拟节点。
相关参考:
https://medium.com/js-dojo/whats-new-in-vue-js-2-0-virtual-dom-dc4b5b827f40#.wb6hc5yz9待阅读:
http://www.cnblogs.com/lvyongbo/p/5925833.html
http://www.cnblogs.com/lvyongbo/p/5922448.html
http://www.cnblogs.com/lvyongbo/p/5938153.html
-
DOM节点也可以表示为一个JavaScript对象,就像这样: //用Javascript代码表示DOM节点的伪代码 Let domNode = { tag: ‘ul’ attributes: { id: ‘myId’ } children: [ //这里是 li ] }; 这就是虚拟的DOM节点,很好理解吧。 3.更新虚拟节点, 并不昂贵贵 //更新虚拟DOM的代码 domNode.children.push(‘