Vue.js 2.0新增的虚拟DOM是怎么回事?

Posted 余鹏老师

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue.js 2.0新增的虚拟DOM是怎么回事?相关的知识,希望对你有一定的参考价值。

译文:众成翻译 http://zcfy.cc/article/what-s-new-in-vue-js-2-0-virtual-dom-1436.html


你可能早就已经听说了 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是怎么回事?的主要内容,如果未能解决你的问题,请参考以下文章

vue.js 2.0 啥时候发布的

Part3-2-2 Vue.js 源码剖析-虚拟 DOM

前端每周清单:Next.js 2.0 发布,Vue.js 2.2 完整API 手册,Safari 10.1 新增系列重要特性

Vue2总结虚拟DOM

带有 Vue 2.0 的 Sortable.js 排序不正确

从头开始创建自己的Vue.js—第2部分(虚拟DOM基础)