直接操作DOM会影响性能，所以才产生了虚拟DOM。

什么是虚拟DOM

  1. 一个对象，两个前提，三个步骤。
  2. Virtual DOM是一个基本的JavaScript对象，也是整个Virtual DOM数的基本。
  3. 两个前提：JavaScript可以很快、直接操作DOM很慢，这是Virtual DOM得以实现的两个基本前提。得益于V8引擎的出现，让JavaScript可以高效的运行，在性能上有很大提高。直接操作DOM会引起性能问题。
  4. 三个步骤：实现Virtual DOM的三个步骤，生成Virtual DOM树，对比两棵树的差异，更新视图。
  1. export default class VNode {
  2.   tag: string | void;
  3.   data: VNodeData | void;
  4.   children: ?Array<VNode>;
  5.   text: string | void;
  6.   elm: Node | void;
  7.   ns: string | void;
  8.   context: Component | void; // rendered in this component's scope
  9.   key: string | number | void;
  10.   componentOptions: VNodeComponentOptions | void;
  11.   componentInstance: Component | void; // component instance
  12.   parent: VNode | void; // component placeholder node
  14.   // strictly internal
  15.   raw: boolean; // contains raw HTML? (server only)
  16.   isStatic: boolean; // hoisted static node
  17.   isRootInsert: boolean; // necessary for enter transition check
  18.   isComment: boolean; // empty comment placeholder?
  19.   isCloned: boolean; // is a cloned node?
  20.   isOnce: boolean; // is a v-once node?
  21.   asyncFactory: Function | void; // async component factory function
  22.   asyncMeta: Object | void;
  23.   isAsyncPlaceholder: boolean;
  24.   ssrContext: Object | void;
  25.   fnContext: Component | void; // real context vm for functional nodes
  26.   fnOptions: ?ComponentOptions; // for SSR caching
  27.   devtoolsMeta: ?Object; // used to store functional render context for devtools
  28.   fnScopeId: ?string; // functional scope id support
  30.   constructor (
  31.     tag?: string,
  32.     data?: VNodeData,
  33.     children?: ?Array<VNode>,
  34.     text?: string,
  35.     elm?: Node,
  36.     context?: Component,
  37.     componentOptions?: VNodeComponentOptions,
  38.     asyncFactory?: Function
  39.   ) {
  40.     this.tag = tag
  41.     this.data = data
  42.     this.children = children
  43.     this.text = text
  44.     this.elm = elm
  45.     this.ns = undefined
  46.     this.context = context
  47.     this.fnContext = undefined
  48.     this.fnOptions = undefined
  49.     this.fnScopeId = undefined
  50.     this.key = data && data.key
  51.     this.componentOptions = componentOptions
  52.     this.componentInstance = undefined
  53.     this.parent = undefined
  54.     this.raw = false
  55.     this.isStatic = false
  56.     this.isRootInsert = true
  57.     this.isComment = false
  58.     this.isCloned = false
  59.     this.isOnce = false
  60.     this.asyncFactory = asyncFactory
  61.     this.asyncMeta = undefined
  62.     this.isAsyncPlaceholder = false
  63.   }

Vue Virtual DOM实现时参考的项目
https://github.com/snabbdom/snabbdom

总结

Virtual DOM除了数据结构的定义，映射到真实的DOM上要经历VNode的crate、diff、patch等过程。那么在Vue.js中，VNode的crate是通过之前提到的crateElement方法创建的，接下来顺着文章往下看。

参考资料

实现一个Virtual DOM
https://segmentfault.com/a/1190000016129036

为什么DOM操作昂贵呢
https://www.kancloud.cn/digest/liao-js/149473

理解Virtual DOM
https://github.com/y8n/blog/issues/5