這是“從頭創建自己的vuei .js”系列文章的第二部分，在這里我將介紹如何創建響應式框架(比如vuei .js)的基本原理。在第一部分中，我描述了我們需要的部分和要遵循的路線圖。

?DOM文檔對象模型,一個網站的HTML結構 ?VDOM =代表結構的副本

虛擬DOM是將實際DOM表示為JavaScript格式，在這種格式中操作它比在每次有變化時操作實際DOM更容易、成本更低。

如果您不想將DOm呈現給瀏覽器，而是呈現給一個字符串(當涉及到服務器端呈現時很方便)，那么它也很有用。

所以，虛擬DOM是由虛擬節點組成的，在我們將要編碼的例子中，它看起來是這樣的:

{
    tag: 'div',
    props: {
        class: 'container'
    },
    children: [
        {
            tag: 'h1',
            props: {},
            children: 'Hello World'
        },
        {
            tag: 'p',
            props: {},
            children: 'Lorem ipsum dolor sit amet.'
        }
    ]
}

上面的例子相當于這個HTML代碼:

    
Hello World
    
Lorem ipsum dolor sit amet.

所以一個虛擬節點的組成為:

• An HTML tag as String
• An Object of properties
• A list of children than can either be:
  • Another node
  • A text (representing the content)

在我們的示例中，我們將不構建一個成熟的虛擬DOM“引擎”，但足以理解基礎知識。

讓我們看一下虛擬DOM的編碼。我們將把所有未來的代碼建立在以下幾行之上。因此，創建一個包含以下內容的html文件:

正如你所看到的，我們有五個不同的函數，它們都完成了創建和渲染虛擬DOM的任務:

• h創建一個虛擬節點(但還沒有將其掛載到實際的DOM)。我稱它為h，因為它在vuy。js項目中也是這樣叫的
• mount將獲取一個給定的虛擬節點并將其掛載到實際DOM中的一個給定容器中。對于第一個元素，這將是我們在文件最頂部創建的#app節點。
• 卸載將從父節點刪除虛擬節點
• 到目前為止，patch是我們為VDOM編寫的最大的函數。這是因為我們必須用遞歸的方式比較兩個不同的節點并檢查所有的差異(遞歸地對所有的子節點進行檢查)。
• render是render函數的簡化版本。在我們的示例中，它使用內部給定的消息創建各種虛擬節點(稍后我們將對其進行更改，以演示我們的VDOM“引擎”的工作方式)。

在第1部分中，我們看到了構建自己的Vue所需的構建部分。在本部分中，我們了解了如何構建虛擬dom的基礎知識。