用一个原生的JS对象去描述一个节点,比创建一个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
    13. // strictly internal
    14. raw: boolean; // contains raw HTML? (server only)
    15. isStatic: boolean; // hoisted static node
    16. isRootInsert: boolean; // necessary for enter transition check
    17. isComment: boolean; // empty comment placeholder?
    18. isCloned: boolean; // is a cloned node?
    19. isOnce: boolean; // is a v-once node?
    20. asyncFactory: Function | void; // async component factory function
    21. asyncMeta: Object | void;
    22. isAsyncPlaceholder: boolean;
    23. ssrContext: Object | void;
    24. fnContext: Component | void; // real context vm for functional nodes
    25. fnOptions: ?ComponentOptions; // for SSR caching
    26. devtoolsMeta: ?Object; // used to store functional render context for devtools
    27. fnScopeId: ?string; // functional scope id support
    28. constructor (
    29. tag?: string,
    30. data?: VNodeData,
    31. children?: ?Array<VNode>,
    32. text?: string,
    33. elm?: Node,
    34. context?: Component,
    35. componentOptions?: VNodeComponentOptions,
    36. asyncFactory?: Function
    37. ) {
    38. this.tag = tag
    39. this.data = data
    40. this.children = children
    41. this.text = text
    42. this.elm = elm
    43. this.ns = undefined
    44. this.context = context
    45. this.fnContext = undefined
    46. this.fnOptions = undefined
    47. this.fnScopeId = undefined
    48. this.key = data && data.key
    49. this.componentOptions = componentOptions
    50. this.componentInstance = undefined
    51. this.parent = undefined
    52. this.raw = false
    53. this.isStatic = false
    54. this.isRootInsert = true
    55. this.isComment = false
    56. this.isCloned = false
    57. this.isOnce = false
    58. this.asyncFactory = asyncFactory
    59. this.asyncMeta = undefined
    60. this.isAsyncPlaceholder = false
    61. }
    62. // DEPRECATED: alias for componentInstance for backwards compat.
    63. /* istanbul ignore next */
    64. get child (): Component | void {
    65. return this.componentInstance
    66. }

    Vue.js中Virtual DOM是借鉴了一个开源库https://github.com/snabbdom/snabbdom的实现,然后加入了一些Vue.js特色的东西