vue 什麼是Virtual Dom？

1. virtual Dom是什麼？

        Vue 2 和react一樣使用了virtual Dom的技術，virtual Dom不是真正意義上的dom，而是一個輕量級的JavaScript對象，在狀態發生變化時，virtual Dom會進行diff運算，來更新只需要被替換的DOM，而不是全部重繪，與DOM操作相比，virtual Dom是基於JavaScript計算的，所以開銷會小很多。

正常的DOM節點在HTML中是這樣的：

<div id="main">
        <p>文本內容</p>
        <p>文本內容</p>
      </div>

用Virtual Dom創建的JavaScript對象一般會是這樣的：

var vNode = {
    tag: 'div',
    attributes: {
        id: 'main'
    },
    children: [
        // p節點
    ]
}

Virtual Dom 是一種vnode類的表達，每個dom元素或組件都對應一個vnode對象，Vue源碼中的VNode類差不多是這樣的：

export interface VNode {
      tag?: string, // 當前節點的標籤名
      data?: VNodeData, // 當前節點的數據對象
      children?: ?Array<VNode>, // 子節點，數組，也是Vnode類型
      text?: string, // 當前節點的文本，一般文本節點或註釋節點會有該屬性
      elm?: Node, // 當前虛擬節點對應的真實的DOM節點
      ns?: string, // 節點的namespace
      context?: Vue, // 編譯作用域
      key?: string | number, // 節點key的屬性，用於作爲節點的標識，有利於patch的優化
      // functionalContext 函數化組件的作用域
      componentOptions?: VNodeComponentOptions, //創建組件實例時會用到的選項信息
      componentInstance?: Vue, //
      parent?: VNode, //組件的佔位節點
      raw?: Boolean, // 原始html
      isStatic: Boolean, // 靜態節點的標識
      isRootInsert: Boolean, // 是否作爲根節點插入， 被<transition>包裹的節點，該屬性的值爲false
      isComment: Boolean, // 當前節點是否是註釋節點
      isCloned: Boolean, // 當前節點是否是克隆節點
      isOnce: Boolean, // 當前節點是否有v-once指令
    }

VNode 主要類型有一下幾種：