对vue虚拟DOM理解

为什么需要虚拟DOM

DOM是很慢的，其元素非常庞大，页面的性能问题鲜有由JS引起的，大部分都是由DOM操作引起的。如果对前端工作进行抽象的话，主要就是维护状态和更新视图；而更新视图和维护状态都需要DOM操作。其实近年来，前端的框架主要发展方向就是解放DOM操作的复杂性。

更新DOM是非常昂贵的操作

当我们使用Javascript来修改我们的页面，浏览器已经做了一些工作，以找到DOM节点进行更改，例如：

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

理解虚拟DOM

虚拟的DOM的核心思想是：对复杂的文档DOM结构，提供一种方便的工具，进行最小化地DOM操作。这句话，也许过于抽象，却基本概况了虚拟DOM的设计思想

我们可以用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节点，很好理解吧。

引入虚拟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编程，您可以创建工厂式的功能来建立虚拟节点。