これは、「独自のvuei.jsを最初から作成する」シリーズの第2部です.ここでは、vuei.jsなどの応答フレームワークを作成する基本原理について説明します.第1部では、私たちが必要とする部分と従う路線図について説明します.もしあなたがまだ読んだことがないなら、この文章を読む前に読むことをお勧めします.
What is a virtual DOM?
????DOMドキュメントオブジェクトモデル、WebサイトのHTML構造???VCOM=構造を表すコピー
仮想DOMは、実際のDOMをJavaScript形式として表し、変化するたびに実際のDOMを操作するよりも操作が容易で、コストが低い.
ブラウザにDOmを表示せずに文字列に表示する場合(サーバ側の表示に関連する場合は便利です)、これも便利です.
Virtual nodes
したがって、仮想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)

Virtual DOM skeleton
我々の例では、成熟した仮想DOM「エンジン」を構築しませんが、基礎知識を理解するのに十分です.
仮想DOMのコードを見てみましょう.私たちはすべての将来のコードを以下の行に構築します.したがって、以下のhtmlファイルを作成します.

    // Create virtual node
    function h(tag, props, children) {
        // Return the virtual node
    }

    // Mount a virtual node to the DOM
    function mount(vnode, container) {
        // Create the element
        // Set props
        // Handle children
        // Mount to the DOM
    }

    // Unmount a virtual node from the DOM
    function unmount(vnode) {
        // Unmount the virtual node
    }

    // Take 2 vnodes, compare & figure out what's the difference
    function patch(n1, n2) {
        // Case where the nodes are of the same tag
        // Case where the new vnode has string children
        // Case where the new vnode has an array of vnodes
        // Case where the nodes are of different tags
    }

    function render(message) {
        // Render a virtual node with a given message
    }

    // Create virtual nodes & render them below this line...

 
   
       ，          ，             DOM   :
 
   
 
    
h        (            DOM)。    h，    vuy。js         
 
    
mount                    DOM         。       ，              #app  。
 
    
             
 
    
     ，patch    VDOM        。                               (              )。
 
    
render render       。       ，                  (           ，      VDOM“  ”     )。
 
   
 
   
What's next ⚡️
 
   
  1   ，          Vue       。     ，           dom     。
 
   
     ，            DOM  。