let div = document.createElement('div')
  let str = ''
  for (const key in div) {
    str += key + ''
  }
  console.log(str)
      

// 通过js对象描述的dom结构
   {
       tag: 'div'
       data: {
           id: 'app',
           class: 'main'
       },
       children: [
           {
               tag: 'p',
               text: 'this is test'
           }
       ]
   }

 //最后真实渲染的dom结构
   <div id="app" class="mian">
      <p>this is test</p>
  </div>
   

// 源码地址：src/core/vdom/vnode.js
// 通过vNode类，实例化出不同的虚拟DOM节点
export default class VNode {

 constructor (
   tag?: string, // 当前节点标签名
   data?: VNodeData, // // 当前节点的数据对象，也就是标签上的属性；包括attrs,style,hook等具体包含的字段可以参考/types/vnode.d.ts
   children?: ?Array<VNode>, ////数组类型，包含当前节点的子节点
   text?: string, // 当前节点的文本
   elm?: Node,
   context?: Component,
   componentOptions?: VNodeComponentOptions,
   asyncFactory?: Function
 ) {
   this.tag = tag // 当前节点标签名
   this.data = data // 当前节点的数据对象，也就是标签上的属性；包括attrs,style,hook等具体包含的字段可以参考/types/vnode.d.ts
   this.children = children //数组类型，包含当前节点的子节点
   this.text = text // 当前节点的文本
   this.elm = elm // 当前虚拟节点对应的真实的dom节点
   this.ns = undefined // 节点的namespace（命名空间）
   this.context = context // 编译作用域，当前节点对应的vue实例
   this.fnContext = undefined // 函数组件化的作用域，当前组件对应的vue实例
   this.fnOptions = undefined  // 函数式组件Option选项
   this.fnScopeId = undefined
   this.key = data && data.key // 节点的key属性，用作节点的标识，有利于patch优化
   this.componentOptions = componentOptions // 创建组件实例时会用到的选项信息
   this.componentInstance = undefined //当前组件节点对应的vue实例
   this.parent = undefined //组件的占位节点
   this.raw = false // 是否为原生HTML或只是普通文本，innerHTML的时候为true，textContent的时候为false
   this.isStatic = false //静态节点标识
   this.isRootInsert = true // 是否作为根节点插入被<transition>包裹的节点，该属性的值为false
   this.isComment = false //当前节点是否是注释节点
   this.isCloned = false //当前节点是否为克隆节点
   this.isOnce = false // 当前节点是否有v-once指令
   this.asyncFactory = asyncFactory
   this.asyncMeta = undefined
   this.isAsyncPlaceholder = false
 }

 // DEPRECATED:向后兼容组件的别名
 /* istanbul ignore next */
 get child (): Component | void {
   return this.componentInstance
 }
}
   

// 源码地址：src/core/vdom/vnode.js
// 创建注释节点
export const createEmptyVNode = (text: string = '') => {
 const node = new VNode()
 node.text = text
 node.isComment = true //isComment为true，说明是一个注释节点
 return node
}

// 源码地址：src/core/vdom/vnode.js
// 创建文本节点
export function createTextVNode (val: string | number) {
 return new VNode(undefined, undefined, undefined, String(val))
}

// 源码地址：src/core/vdom/vnode.js
// 创建克隆节点
export function cloneVNode (vnode: VNode): VNode {
 const cloned = new VNode(
   vnode.tag,
   vnode.data,
   // #7975
   // clone children array to avoid mutating original in case of cloning
   // a child.
   vnode.children && vnode.children.slice(),
   vnode.text,
   vnode.elm,
   vnode.context,
   vnode.componentOptions,
   vnode.asyncFactory
 )
 cloned.ns = vnode.ns
 cloned.isStatic = vnode.isStatic
 cloned.key = vnode.key
 cloned.isComment = vnode.isComment
 cloned.fnContext = vnode.fnContext
 cloned.fnOptions = vnode.fnOptions
 cloned.fnScopeId = vnode.fnScopeId
 cloned.asyncMeta = vnode.asyncMeta
 cloned.isCloned = true
 return cloned
}

<div id="test" class="main"><div> 

// 上面节点对应的 oldVnode 就是
{
  elm:  div  //对真实的节点的引用，本例中就是document.querySelector('v#test.main')
  tag: 'DIV',   //节点的标签
  sel: 'div#test.main'  //节点的选择器
  data: null,       // 一个存储节点属性的对象，对应节点的el[prop]属性，例如onclick , style
  children: [], //存储子节点的数组，每个子节点也是vnode结构
  text: null,    //如果是文本节点，对应文本节点，否则为null
}

// 源码位置: /src/core/vdom/patch.js

function createElm (vnode, parentElm, refElm) {
    const data = vnode.data
    const children = vnode.children
    const tag = vnode.tag
    if (isDef(tag)) { //判断是否有tag标签
      vnode.elm = nodeOps.createElement(tag, vnode)   // 创建元素节点
      createChildren(vnode, children, insertedVnodeQueue) // 创建元素节点的子节点
      insert(parentElm, vnode.elm, refElm)       // 插入到DOM中
    } else if (isTrue(vnode.isComment)) {  //判断注释属性是否是true，true的话就是注释节点
      vnode.elm = nodeOps.createComment(vnode.text)  // 创建注释节点
      insert(parentElm, vnode.elm, refElm)           // 插入到DOM中
    } else { // 如果不是元素节点和注释节点，那么就是文本节点
      vnode.elm = nodeOps.createTextNode(vnode.text)  // 创建文本节点
      insert(parentElm, vnode.elm, refElm)           // 插入到DOM中
    }
  }
function isDef (v) {
   return v !== undefined && v !== null
}       

// 源码位置: /src/core/vdom/patch.js
  function removeVnodes (vnodes, startIdx, endIdx) {
    for (; startIdx <= endIdx; ++startIdx) {
      const ch = vnodes[startIdx]
      if (isDef(ch)) {
        if (isDef(ch.tag)) {
        // 存在tag时，说明是元素节点
          removeAndInvokeRemoveHook(ch) // 移除挂载dom上的节点
          invokeDestroyHook(ch) //销毁的钩子
        } else { // Text node
          // 说明是文本节点
          removeNode(ch.elm)
        }
      }
    }
  }
function isDef (v) {
   return v !== undefined && v !== null
}

// 源码位置: /src/core/vdom/patch.js
  function patchVnode (
    oldVnode,
    vnode,
    insertedVnodeQueue,
    ownerArray,
    index,
    removeOnly
  ) {
    // vnode和oldVnode是完全一样，说明引用一致，没有什么变化；如果是就退出程序
    if (oldVnode === vnode) {
      return
    }
 
    // 让vnode.elm引用到现在的真实dom上，当elm修改时，vnode.elm会同步变化
    const elm = vnode.elm = oldVnode.elm

    // 如果vnode和oldVnode都是静态节点就退出程序，静态节点，无论数据发生任何变化都与它无关
    if (isTrue(vnode.isStatic) &&
      isTrue(oldVnode.isStatic) &&
      vnode.key === oldVnode.key &&
      (isTrue(vnode.isCloned) || isTrue(vnode.isOnce))
    ) {
      vnode.componentInstance = oldVnode.componentInstance
      return
    }

    const oldCh = oldVnode.children
    const ch = vnode.children
 
    // vnode如果没有text属性
    if (isUndef(vnode.text)) {
      // 如果vnode的子节点和oldVnode的子节点都存在
      if (isDef(oldCh) && isDef(ch)) {
        //  若都存在且不相同，则更新子节点，这是diff的核心
        if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)
      } 
      // 若只有vnode存在子节点
      else if (isDef(ch)) {
        if (process.env.NODE_ENV !== 'production') {
          checkDuplicateKeys(ch)
        }
         // 判断oldVnode是否有文本，如果有则清空dom中的文本，再把vnode的子节点添加到真实的DOM中
        if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '')
        addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
   
      } 
      // 若只有oldVnode存在子节点
      else if (isDef(oldCh)) {
        // 清空dom中的节点
        removeVnodes(oldCh, 0, oldCh.length - 1)
     
      } 
      // 如果oldVnode和node都没有子节点，但oldVnode有text
      else if (isDef(oldVnode.text)) {
        // 那么清空oldVnode文本
        nodeOps.setTextContent(elm, '')
      }

    // 如果vnode和oldVnode有text属性，但是oldVnode和vnode的text不相同
    } else if (oldVnode.text !== vnode.text) {
      // 不相同则用vnode.text替换真实的dom文本
      nodeOps.setTextContent(elm, vnode.text)
    }
  
  }

// 源码位置: /src/instance/lifecycle.js
 export function lifecycleMixin (Vue: Class<Component>) {
  Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
      const vm: Component = this
      const prevVnode = vpatch__ is injected in entry points
      // based on the rendering backend used.
      if (!prevVnode) { 
        // 初次渲染，会传入原生dom节点和虚拟dom节点
        vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)
      } else {
        // 更新
        vm.$el = vm.__patch__(prevVnode, vnode)
      }
    }

 }
      

 // 源码位置: /src/core/vdom/patch.js
 /**
   * oldVnode 旧的真实的DOM节点
   * vnode  节点变化后生成新的Vnode
   */
 function patch (oldVnode, vnode) {

    // 如果vnode不存在，oldVnode存在，则调用销毁钩子销毁节点invokeDestroyHook(oldVnode)
    if (isUndef(vnode)) {
      if (isDef(oldVnode)) invokeDestroyHook(oldVnode)
      return
    }

    let isInitialPatch = false
    const insertedVnodeQueue = []
      // 如果oldVnode不存在，Vnode存在，那么创建新节点，则调用createElm()
    if (isUndef(oldVnode)) {
      // empty mount (likely as component), create new root element
      isInitialPatch = true
      createElm(vnode, insertedVnodeQueue)
      // 当Vnode和oldVnode都存在时
    } else {
      const isRealElement = isDef(oldVnode.nodeType)
      if (!isRealElement && sameVnode(oldVnode, vnode)) {
           // patch 现有的根节点,对oldVnode和vnode进行diff，并对oldVnode打patch
        patchVnode(oldVnode, vnode, insertedVnodeQueue, null, null, removeOnly)
    }
 }
        

  // 源码位置: /src/instance/lifecycle.js
function sameVnode (a, b) {
  return (
    // key值
    a.key === b.key && (
      (
        a.tag === b.tag && //标签名
        a.isComment === b.isComment && // 2个节点是否是注释节点
        // 2个节点是否都定义了data，data中包含一些具体信息，例如：class，style
        isDef(a.data) === isDef(b.data) &&
        sameInputType(a, b)  // 当标签是input的时候，type必须相同
      ) || (
        isTrue(a.isAsyncPlaceholder) &&
        a.asyncFactory === b.asyncFactory &&
        isUndef(b.asyncFactory.error)
      )
    )
  )
}
        

newCh.forEach(newChild=>{
  oldCh.forEach(oldChild=>{
     // 处理逻辑省略
  })
})

// 源码位置: /src/core/vdom/patch.js
//循环更新子节点
function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {
  let oldStartIdx = 0 //oldCh开始的索引
  let newStartIdx = 0 //newCh开始的索引
  let oldEndIdx = oldCh.length - 1 //oldCh结束的索引
  let oldStartVnode = oldCh[0] //oldCh未处理的第一个节点
  let oldEndVnode = oldCh[oldEndIdx] //oldCh未处理的最后一个节点
  let newEndIdx = newCh.length - 1 //newCh结束的索引
  let newStartVnode = newCh[0] // newCh中未处理节点中的第一个节点
  let newEndVnode = newCh[newEndIdx]// newCh中未处理节点的最后一个节点
  let oldKeyToIdx, idxInOld, vnodeToMove, refElm

  // removeOnly is a special flag used only by <transition-group> removeOnly是仅由<transition group>使用的特殊标志
  // to ensure removed elements stay in correct relative positions // 确保拆下的元件保持在正确的相对位置
  // during leaving transitions
  const canMove = !removeOnly


  if (process.env.NODE_ENV !== 'production') {
    checkDuplicateKeys(newCh)
  }


  while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
    if (isUndef(oldStartVnode)) {
       // oldCh第一个节点不存在，索引右移，进入下一个节点
      oldStartVnode = oldCh[++oldStartIdx]
    } else if (isUndef(oldEndVnode)) {
       // oldCh最后一个节点不存在，索引左移，进入上一个节点
      oldEndVnode = oldCh[--oldEndIdx]
    } else if (sameVnode(oldStartVnode, newStartVnode)) {
      // 利用sameVnode函数,判断是否是同一个节点
      // 如果oldStartVnode和newStartVnode是同一个节点，就进行patchVnode                                                 
      patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
      // 索引右移，继续循环
      oldStartVnode = oldCh[++oldStartIdx]
      newStartVnode = newCh[++newStartIdx]
    } else if (sameVnode(oldEndVnode, newEndVnode)) { 
      // 如果oldEndVnode和newEndVnode是同一个节点，就进行patchVnode       
      patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx)
       // 索引左移，继续循环
      oldEndVnode = oldCh[--oldEndIdx]
      newEndVnode = newCh[--newEndIdx]
    } else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right  
      // 如果oldStartVnode和newEndVnode是同一个节点,然后把oldStartVnode移动到oldCh所有未处理的节点之后
      patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx)
      // 将oldStartVnode.elm移动到oldEndVnode.elm之后
      canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm))
      oldStartVnode = oldCh[++oldStartIdx] // 索引右移，获取下个节点
      newEndVnode = newCh[--newEndIdx]// // 索引左移，获取上个节点
    } else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left
       // 如果oldEndVnode和newStartVnode是同一个节点,,然后把oldEndVnode移动到oldCh所有未处理的节点之前
      patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
      // 将oldEndVnode.elm移动到oldStartVnode.elm之前
      canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
      oldEndVnode = oldCh[--oldEndIdx]  // 索引左移，获取上个节点
      newStartVnode = newCh[++newStartIdx] // 索引右移，获取下个节点
    } else { 
      // 上面几种都不符合的话,进行常规的循环对比patch
      // createKeyToOldIdx建立key和index索引的对应关系,并返回一个对象
      // 对应关系{key1:0,Key2:1,key3:2}
      if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)

       // 尝试在oldCh里找到跟newStartVnode同一个节点，并拿到这个节点的index
      idxInOld = isDef(newStartVnode.key) //判断newStartVnode有没有key值
        ? oldKeyToIdx[newStartVnode.key] // newStartVnode有key值的话，拿到oldCh对应的index
        : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx) 
        // newStartVnode没有key值的话，采用循环比较的方式，在oldCh中找到newStartVnode对应的节点并拿到index

      // 在oldCh里找不到与newStartVnode对应的index，说明newStartVnode是一个新节点
      if (isUndef(idxInOld)) { // New element
        // 创建新的dom节点,插入到oldStartVnode.elm前面
        createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
      } else { 
        // 在oldCh里找不到与newStartVnode对应的index，叫vnodeToMove
        vnodeToMove = oldCh[idxInOld] // 用index拿到对应的子节点
        if (sameVnode(vnodeToMove, newStartVnode)) { //如果是同一个节点就进行更新节点
          patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
          oldCh[idxInOld] = undefined
          /**
           *  canMove为true表示需要移动节点,false则不移动
           */
          canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
        } else {
          // same key but different element. treat as new element
          // 如果index相同,但节点不相同,被视为新元素;创建新的dom节点
          createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
        }
      }
      // 右移
      newStartVnode = newCh[++newStartIdx]
    }
  }
  /**
   * 如果oldCh比newCh先遍历完,那么说明newCh里剩余的节点都是要新增的节点,
   * 把[ newStartIdx, newEndIdx]之间的所有的节点都插入dom中
   */
  if (oldStartIdx > oldEndIdx) {
    refElm = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm
    // 添加newVnode中剩余的节点到parentElm中
    addVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx, insertedVnodeQueue)
  } else if (newStartIdx > newEndIdx) {
    /**
   * 如果oldCh比newCh后遍历完,那么说明newCh里剩余的节点都是要删除的节点,
   * 把[ newStartIdx, newEndIdx]之间的所有的节点都删除
   */
    removeVnodes(oldCh, oldStartIdx, oldEndIdx)
  }
}