• Virtual DOM
    • 总结

    Virtual DOM

    Virtual DOM 这个概念相信大部分人都不会陌生，它产生的前提是浏览器中的 DOM 是很“昂贵"的，为了更直观的感受，我们可以简单的把一个简单的 div 元素的属性都打印出来，如图所示：
    Virtual DOM - 图1
    可以看到，真正的 DOM 元素是非常庞大的，因为浏览器的标准就把 DOM 设计的非常复杂。当我们频繁的去做 DOM 更新，会产生一定的性能问题。

    而 Virtual DOM 就是用一个原生的 JS 对象去描述一个 DOM 节点，所以它比创建一个 DOM 的代价要小很多。在 Vue.js 中，Virtual DOM 是用 VNode 这么一个 Class 去描述，它是定义在 src/core/vdom/vnode.js 中的。

    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.   fnScopeId: ?string; // functional scope id support
    29.   constructor (
    30.     tag?: string,
    31.     data?: VNodeData,
    32.     children?: ?Array<VNode>,
    33.     text?: string,
    34.     elm?: Node,
    35.     context?: Component,
    36.     componentOptions?: VNodeComponentOptions,
    37.     asyncFactory?: Function
    38.   ) {
    39.     this.tag = tag
    40.     this.data = data
    41.     this.children = children
    42.     this.text = text
    43.     this.elm = elm
    44.     this.ns = undefined
    45.     this.context = context
    46.     this.fnContext = undefined
    47.     this.fnOptions = undefined
    48.     this.fnScopeId = undefined
    49.     this.key = data && data.key
    50.     this.componentOptions = componentOptions
    51.     this.componentInstance = undefined
    52.     this.parent = undefined
    53.     this.raw = false
    54.     this.isStatic = false
    55.     this.isRootInsert = true
    56.     this.isComment = false
    57.     this.isCloned = false
    58.     this.isOnce = false
    59.     this.asyncFactory = asyncFactory
    60.     this.asyncMeta = undefined
    61.     this.isAsyncPlaceholder = false
    62.   }
    64.   // DEPRECATED: alias for componentInstance for backwards compat.
    65.   /* istanbul ignore next */
    66.   get child (): Component | void {
    67.     return this.componentInstance
    68.   }
    69. }

    可以看到 Vue.js 中的 Virtual DOM 的定义还是略微复杂一些的，因为它这里包含了很多 Vue.js 的特性。这里千万不要被这些茫茫多的属性吓到，实际上 Vue.js 中 Virtual DOM 是借鉴了一个开源库 snabbdom 的实现，然后加入了一些 Vue.js 特色的东西。我建议大家如果想深入了解 Vue.js 的 Virtual DOM 前不妨先阅读这个库的源码，因为它更加简单和纯粹。

    总结

    其实 VNode 是对真实 DOM 的一种抽象描述，它的核心定义无非就几个关键属性，标签名、数据、子节点、键值等，其它属性都是都是用来扩展 VNode 的灵活性以及实现一些特殊 feature 的。由于 VNode 只是用来映射到真实 DOM 的渲染，不需要包含操作 DOM 的方法，因此它是非常轻量和简单的。

    Virtual DOM 除了它的数据结构的定义，映射到真实的 DOM 实际上要经历 VNode 的 create、diff、patch 等过程。那么在 Vue.js 中，VNode 的 create 是通过之前提到的 createElement 方法创建的，我们接下来分析这部分的实现。

    原文: https://ustbhuangyi.github.io/vue-analysis/data-driven/virtual-dom.html