vue为什么要用虚拟dom机制_【Vue】虚拟 DOM 是干什么用的？【基础】

作者：Anthony Gore

原文：What's The Deal With Vue's Virtual DOM?

——————————— 以下为译文 —————————————

很多 Vue、React 和 Ember 这样的 JavaScript 框架都实现了“虚拟 DOM”。

这个术语听起来有科幻小说的感觉，它主要的目的是提升 DOM 更新的速度和效率，另外还有一些其他的好处。

先想想 DOM 到底是什么

我们可能会认为 DOM 是 HTML 文档的表现，但实际上 DOM 是一种树状的数据结构，在 HTML 文档被浏览器解析的时候，DOM 就会存在。

浏览器将 DOM 绘制到屏幕上，之后在响应用户行为（比如鼠标点击）或者 JavaScript 的 DOM 操作 API （比如 document.createElement）被调用时，会触发 DOM 的重绘。

更新 DOM 代价比较大

使用 JavaScript 更改页面时，浏览器需要找到被修改的 DOM 节点来进行改变。例如：

// #myId 可能在文档的任何地方，而这个文档可能有数千个节点！
document.getElementById('myId').appendChild(myNewNode);

在现代应用里，DOM 中可能会有数千个节点，所以 DOM 更新会是个耗时计算，频繁的小更新会不可避免的降低页面速度。

虚拟 DOM 是什么

DOM 也可以表示为 JavaScript 的数据结构。下面的伪代码展示了 DOM 节点可能的表示方法：

// 一个 Javascript 无序列表
let domNode = {   
  tag: 'ul',   
  attributes: { id: 'myId' },   
  children: [     
    // where the LI's would go   
  ] 
};

如果我们把这个对象称为一个“虚拟”DOM 节点，那所有的 DOM 节点组合起来就会成为一个虚拟 DOM。

但为什么要使用虚拟 DOM 呢？

更新虚拟节点的代价并不算大

// 更新虚拟 DOM 大概会是这样的操作
domNode.children.push('<ul>Item 3</ul>');

使用虚拟 DOM，我们就不用调用类似于 getElementById 这样的 API 来直接更新 DOM，只需要在虚拟 DOM 中改变 JS 对象就行了，这样的计算代价会更小。

之后，当我们需要把虚拟 DOM 的改变同步到真实 DOM 时，会使用一个高效的更新函数：

// 这个函数会调用 DOM API 来更新浏览器 DOM。
// 这样的更新是批操作，即多次更新虚拟 DOM 只会触发一个最终的真实 DOM 更新，
// 所以比随时更新真实 DOM 效率要高。
sync(originalDomNode, domNode);

每个更新循环周期内可能会有很多个节点被更新，所以批操作会有大幅的效率提升。

不只是性能

使用虚拟 DOM 的好处不仅仅是性能提升，它还使得其他的一些功能得以实现。

比如，在 Vue.js 中，可以使用渲染函数 render() 来绕过 HTML 模板或模板属性的使用。 render() 会返回类似于这样的虚拟节点：

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

这样的虚拟节点会输出为如下的真实 DOM 节点：

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

为什么要这么做呢？有以下几个可能的好处：

1. 获得了 JavaScript 的编程能力。比如通过 JavaScript 的数组方法，可以创建工厂式的函数来创建虚拟节点。如果使用模板语法的话这样的功能实现起来会更困难。
2. 可以使代码的通用性更强。因为 Vue 实例并不会耦合在 HTML 文件里，所以也可以使用服务端来渲染。
3. 支持 JSX。渲染函数允许 JS 拓展使用 JSX 语法，因此可以更合适的构建基于组件的应用。