Vue从入门到实战：虚拟DOM

DOM

元素、文本等，是作为一个个DOM节点而存在的，对元素、文本的操作就是对DOM节点的操作。

虚拟DOM

每个元素都是一个节点。每段文字也是一个节点。甚至注释也都是节点。一个节点就是页面的一个部分。就像家谱树一样，每个节点都可以有孩子节点 (也就是说每个部分可以包含其它的一些部分)。

高效地更新所有这些节点会是比较困难的，不过所幸你不必手动完成这个工作。你只需要告诉 Vue 你希望页面上的 HTML 是什么，这可以是在一个模板里：

<h1>{{ blogTitle }}</h1>

或者一个渲染函数里：

render: function (createElement) {
  return createElement('h1', this.blogTitle)
}

在这两种情况下，Vue 都会自动保持页面的更新，即便 blogTitle 发生了改变。

作为前端框架，必然要考虑DOM渲染效率的问题，Vue.js 在DOM之上增加了一个抽象层来解决渲染效率问题，这就是虚拟DOM.

虚拟DOM使用普通的JS对象来描述DOM元素。每一个虚拟节点都是一个VNode的实例。

Vue在更新真实DOM前，会比较更新前后虚拟DOM结构中有差异的部分，然后采用异步更新队列的方式将差异部分更新到真实DOM中。