这里有新鲜出炉的 vue.js 教程,程序狗速度看过来!
Vue.js 是构建 web 界面的 JavaScript 库,提供数据驱动的组件,还有简单灵活的 API,使得 MVVM 更简单。
大家可能听说 Vue.js 2.0 已经发布,并且在其中新添加如了一些新功能。其中一个功能就是 "Virtual DOM"。那么下面这篇文章就来给大家详细介绍 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 文档中的表现通常是这样的:
- <ul id='myId'>
- <li>
- Item 1
- </li>
- <li>
- Item 2
- </li>
- <ul>
DOM 节点也可以表示为一个 Javascript 对象,就像这样:
- //用Javascript代码表示DOM节点的伪代码
- Let domNode = {
- tag: 'ul'attributes: {
- id: 'myId'
- }
- children: [
- //这里是 li
- ]
- };
这就是虚拟的 DOM 节点,很好理解吧。
3. 更新虚拟节点, 并不昂贵贵
- //更新虚拟DOM的代码
- domNode.children.push('<ul>Item 3</ul>');
如果我们用一个虚拟 DOM,而不是直接调用像
的方法,这样只操作 Javascript 对象,这样是相当便宜的。
- .getElementById
然后,再把更改的部分更新到真正的 DOM,方法如下:
- //这个方法是调用DOM API来更改真正DOM的
- //它会分批执行从而获取更高的效率
- sync(originalDomNode, domNode);
Vue.js 在 2.0 版本中引入虚拟 DOM 是一个正确的选择吗 ?
引入虚拟 DOM 实际上有优点也缺点。
1、尺寸
更多的功能意味着更多的代码。幸运的是 Vue.js 2.0 仍然是相当小的(21.4kb 当前版本)。
2、内存
虚拟 DOM 需要在内存中的维护一份 DOM 的副本。在 DOM 更新速度和使用内存空间之间取得平衡。
3、不是适合所有情况
如果虚拟 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 编程,您可以创建工厂式的功能来建立虚拟节点。
总结
以上就是在这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
来源: http://www.phperz.com/article/17/0428/327828.html