patch(vnode, h('div#app', obj.foo)) 

2. Cross platform: convert virtual dom updates to different runtime special operations to achieve cross platform

const patch = init([snabbdom_style.default])

patch(vnode, h('div#app', {style:{color:'red'}}, obj.foo))

three   Compatibility: you can also add compatibility codes to enhance the compatibility of operations  

1.1 comparison between real dom and virtual dom

Real dom

<div>
    <p>Hello World</p>
</div>

Virtual dom  

let vnode = {
    tag: 'div',
    children:[ {tag:'p', text:'Hello World'}]
}

2. diff algorithm

2.1 patch function

2.1.1 patch implementation

File   patch core\vdom\patch.js

  return function patch (oldVnode, vnode, hydrating, removeOnly) {
    // If the new virtual dom tree does not exist, it is deleted
    if (isUndef(vnode)) {
      if (isDef(oldVnode)) invokeDestroyHook(oldVnode)
      return
    }
    let isInitialPatch = false
    const insertedVnodeQueue = []

    //  If the old vdom does not exist, add a new one
    if (isUndef(oldVnode)) {
      // empty mount (likely as component), create new root element
      isInitialPatch = true
      createElm(vnode, insertedVnodeQueue)
    } else {

      // If the real node is passed in, the initialization operation is performed
      const isRealElement = isDef(oldVnode.nodeType)

      if (!isRealElement && sameVnode(oldVnode, vnode)) {
        // patch existing root node
        // There are old and new vdom s
        patchVnode(oldVnode, vnode, insertedVnodeQueue, null, null, removeOnly)
      } else {
        // During initialization, create a new dom, append it to the body, and delete the array
        if (isRealElement) {
          // mounting to a real element
          // check if this is server-rendered content and if we can perform
          // a successful hydration.

          // If there is a real node, there is the data server render attribute
          if (oldVnode.nodeType === 1 && oldVnode.hasAttribute(SSR_ATTR)) {
            // When the old Vnode is a rendering element on the server side, hydrating is marked as true
            oldVnode.removeAttribute(SSR_ATTR)
            hydrating = true
          }
           // You need to map the virtual DOM to the real DOM with the hydrate function
          if (isTrue(hydrating)) {
            // It needs to be merged into the real DOM
            if (hydrate(oldVnode, vnode, insertedVnodeQueue)) {
              // Call insert hook
              invokeInsertHook(vnode, insertedVnodeQueue, true)
              return oldVnode
            } else if (process.env.NODE_ENV !== 'production') {
              warn(
                'The client-side rendered virtual DOM tree is not matching ' +
                'server-rendered content. This is likely caused by incorrect ' +
                'HTML markup, for example nesting block-level elements inside ' +
                '<p>, or missing <tbody>. Bailing hydration and performing ' +
                'full client-side render.'
              )
            }
          }
          // either not server-rendered, or hydration failed.
          // create an empty node and replace it
          
          // If it is not a server-side rendering element or merging to the real DOM fails, create an empty Vnode node to replace it
          oldVnode = emptyNodeAt(oldVnode)
        }

        // replacing existing element
        const oldElm = oldVnode.elm
        const parentElm = nodeOps.parentNode(oldElm)

        // create new node
        createElm(
          vnode,
          insertedVnodeQueue,
          // extremely rare edge case: do not insert if old element is in a
          // leaving transition. Only happens when combining transition +
          // keep-alive + HOCs. (#4590)
          oldElm._leaveCb ? null : parentElm,
          nodeOps.nextSibling(oldElm)
        )

        // update parent placeholder node element, recursively
        if (isDef(vnode.parent)) {
          let ancestor = vnode.parent
          const patchable = isPatchable(vnode)
          while (ancestor) {
            for (let i = 0; i < cbs.destroy.length; ++i) {
              cbs.destroy[i](ancestor)
            }
            ancestor.elm = vnode.elm
            if (patchable) {
              for (let i = 0; i < cbs.create.length; ++i) {
                cbs.create[i](emptyNode, ancestor)
              }
              // #6513
              // invoke insert hooks that may have been merged by create hooks.
              // e.g. for directives that uses the "inserted" hook.
              const insert = ancestor.data.hook.insert
              if (insert.merged) {
                // start at index 1 to avoid re-invoking component mounted hook
                for (let i = 1; i < insert.fns.length; i++) {
                  insert.fns[i]()
                }
              }
            } else {
              registerRef(ancestor)
            }
            ancestor = ancestor.parent
          }
        }

        // destroy old node
        if (isDef(parentElm)) {
          removeVnodes([oldVnode], 0, 0)
        } else if (isDef(oldVnode.tag)) {
          invokeDestroyHook(oldVnode)
        }
      }
    }

    invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch)
    return vnode.elm
  }

3. patchVnode

let i
    const data = vnode.data
    if (isDef(data) && isDef(i = data.hook) && isDef(i = i.prepatch)) {
      i(oldVnode, vnode)
    }

    // Check whether the old and new nodes have child queues
    const oldCh = oldVnode.children
    const ch = vnode.children

    // Attribute update
    if (isDef(data) && isPatchable(vnode)) {
      for (i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode)
      if (isDef(i = data.hook) && isDef(i = i.update)) i(oldVnode, vnode)
    }

    // Judge whether it is an Element. If there is no text, it is an Element
    if (isUndef(vnode.text)) {

      // All have children
      if (isDef(oldCh) && isDef(ch)) {
        if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)
      } else if (isDef(ch)) {
        // Only new nodes have children
        if (process.env.NODE_ENV !== 'production') {
          checkDuplicateKeys(ch)
        }
        // Empty old node text
        if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '')

        // Add child
        addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
      } else if (isDef(oldCh)) {
        // Only the old node has children
        removeVnodes(oldCh, 0, oldCh.length - 1)
      } else if (isDef(oldVnode.text)) {
        // Old node has text
        nodeOps.setTextContent(elm, '')
      }
    } else if (oldVnode.text !== vnode.text) {
      // Both old and new are text and different
      nodeOps.setTextContent(elm, vnode.text)
    }
    if (isDef(data)) {
      if (isDef(i = data.hook) && isDef(i = i.postpatch)) i(oldVnode, vnode)
    }
  }

4. updateChildren

Here comes the point!!!!