vue 什麼是Virtual Dom？

virtual Dom是什麼？

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

vue 什麼是Virtual Dom？

正常的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 主要類型有一下幾種：

vue 什麼是Virtual Dom？