Virtual DOM实现详解

const vm = new Vue({
  data: { name: 'Vue' },
  template: '<div id="app" class="box">Hello {{ name }}</div>'
}).$mount('#app');

const vnode = vm._vnode;
console.log(vnode.tag);                   // div
console.log(vnode.data);                  // { staticClass: 'box', attrs: { id: 'app' } }
console.log(vnode.children.length);       // 1
console.log(vnode.children[0].tag);       // undefined —— 文本节点没有 tag
console.log(vnode.children[0].text);      // Hello Vue
console.log(vnode.elm === vm.$el);        // true
console.log(vnode.context === vm);        // true

constructor (tag, data, children, text, elm, context, componentOptions, asyncFactory) {
  this.tag = tag                    // 标签名；组件 VNode 的 tag 是拼出来的，见最后一节
  this.data = data                  // 编译产物里的第二个参数：attrs / staticClass / on / hook …
  this.children = children          // 子 VNode 数组
  this.text = text                  // 文本节点和注释节点用它，元素节点是 undefined
  this.elm = elm                    // 对应的真实 DOM —— 全类唯一一个碰浏览器的字段
  this.context = context            // 在哪个实例的作用域里渲染出来的
  this.key = data && data.key       // key 不是构造参数，是从 data 上取的
  this.componentOptions = componentOptions   // 只有组件 VNode 有值
  this.componentInstance = undefined         // 组件实例，patch 里的 init 钩子跑完才被填上
  this.parent = undefined           // 组件根 VNode 反向指回它的占位 VNode
  this.isStatic = false             // 编译期标记为静态的节点
  this.isComment = false            // 注释节点
  this.isCloned = false
  // 省略：ns / fnContext / fnOptions / fnScopeId / raw / isRootInsert / isOnce /
  //       asyncFactory / asyncMeta / isAsyncPlaceholder
}

export const createEmptyVNode = (text = '') => {
  const node = new VNode()
  node.text = text
  node.isComment = true          // 空 VNode 就是一个注释节点，页面上那个 <!----> 是它
  return node
}

export function createTextVNode (val) {
  return new VNode(undefined, undefined, undefined, String(val))
}

export function cloneVNode (vnode) {
  const cloned = new VNode(
    vnode.tag, vnode.data,
    vnode.children && vnode.children.slice(),   // #7975：拷一份数组，免得改到原来那棵树
    vnode.text, vnode.elm, vnode.context, vnode.componentOptions, vnode.asyncFactory
  )
  // 省略：ns / isStatic / key / isComment / fnContext / fnOptions / fnScopeId / asyncMeta 逐个抄过去
  cloned.isCloned = true
  return cloned
}

export function _createElement (context, tag, data, children, normalizationType) {
  // 省略：data 是响应式对象时的警告、data.is 改写 tag、key 不是原始值时的警告、
  //       children 是单个函数时当作默认作用域插槽
  if (!tag) {
    return createEmptyVNode()        // :is 绑到了假值，返回一个注释节点占位
  }
  if (normalizationType === ALWAYS_NORMALIZE) {
    children = normalizeChildren(children)
  } else if (normalizationType === SIMPLE_NORMALIZE) {
    children = simpleNormalizeChildren(children)
  }

  let vnode, ns
  if (typeof tag === 'string') {
    let Ctor
    ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
    if (config.isReservedTag(tag)) {
      // div、span 这些平台内置标签，直接造一个普通 VNode
      vnode = new VNode(config.parsePlatformTagName(tag), data, children, undefined, undefined, context)
    } else if (isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {
      // 在 $options.components 上查到了：是组件，交给 createComponent
      vnode = createComponent(Ctor, data, context, children, tag)
    } else {
      // 查不到：当成未知标签原样造出来，命名空间留到运行时再定
      vnode = new VNode(tag, data, children, undefined, undefined, context)
    }
  } else {
    vnode = createComponent(tag, data, context, children)   // tag 直接是选项对象或构造器
  }
  // 省略：结果是数组时直接返回、applyNS、registerDeepBindings
  return isDef(vnode) ? vnode : createEmptyVNode()
}

// 一档：编译产物里出现了组件。函数式组件可能返回数组，拍平一层就够
export function simpleNormalizeChildren (children) {
  for (let i = 0; i < children.length; i++) {
    if (Array.isArray(children[i])) {
      return Array.prototype.concat.apply([], children)
    }
  }
  return children
}

// 二档：手写 render / JSX，或者模板里有 v-for、<template>、<slot>。什么都可能出现
export function normalizeChildren (children) {
  return isPrimitive(children)
    ? [createTextVNode(children)]                  // 'hello' → 一个文本 VNode
    : Array.isArray(children)
      ? normalizeArrayChildren(children)           // 递归拍平、合并相邻文本、给 v-for 的项补默认 key
      : undefined
}

return function patch (oldVnode, vnode, hydrating, removeOnly) {
5 collapsed lines
  if (isUndef(vnode)) {
    // 新树是空的：这是一次销毁，只跑钩子，不建任何东西
    if (isDef(oldVnode)) invokeDestroyHook(oldVnode)
    return
  }

  let isInitialPatch = false
  const insertedVnodeQueue = []

  if (isUndef(oldVnode)) {
    // 子组件第一次渲染走这条：没有容器，先把 DOM 造出来，插哪儿由父组件决定
    isInitialPatch = true
    createElm(vnode, insertedVnodeQueue)
  } else {
    const isRealElement = isDef(oldVnode.nodeType)
    if (!isRealElement && sameVnode(oldVnode, vnode)) {
      patchVnode(oldVnode, vnode, insertedVnodeQueue, null, null, removeOnly)
    } else {
      if (isRealElement) {
        // new Vue({ el: '#app' }) 的第一次：oldVnode 是页面上那个真的 <div id="app">
        // 省略：带 data-server-rendered 属性时改走 hydrate
        oldVnode = emptyNodeAt(oldVnode)   // 拿它的 tagName 包一个空 VNode，好走下面的通用逻辑
      }

      const oldElm = oldVnode.elm
      const parentElm = nodeOps.parentNode(oldElm)

      // 新的先建好、插在旧元素后面
      createElm(vnode, insertedVnodeQueue, parentElm, nodeOps.nextSibling(oldElm))
      // 省略：向上把各层占位 VNode 的 elm 换成新的

      if (isDef(parentElm)) {
        removeVnodes([oldVnode], 0, 0)     // 旧的到这一步才被删掉
      } else if (isDef(oldVnode.tag)) {
        invokeDestroyHook(oldVnode)
      }
    }
  }

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

function sameVnode (a, b) {
  return (
    a.key === b.key &&
    a.asyncFactory === b.asyncFactory &&
    (
      (
        a.tag === b.tag &&
        a.isComment === b.isComment &&
        isDef(a.data) === isDef(b.data) &&
        sameInputType(a, b)
      ) || (
        isTrue(a.isAsyncPlaceholder) &&
        isUndef(b.asyncFactory.error)
      )
    )
  )
}

function sameInputType (a, b) {
  if (a.tag !== 'input') return true
  let i
  const typeA = isDef(i = a.data) && isDef(i = i.attrs) && i.type
  const typeB = isDef(i = b.data) && isDef(i = i.attrs) && i.type
  return typeA === typeB || (isTextInputType(typeA) && isTextInputType(typeB))
}

function createElm (vnode, insertedVnodeQueue, parentElm, refElm, nested, ownerArray, index) {
  // 省略：vnode 已经有 elm 且来自数组时先 cloneVNode 一份
  vnode.isRootInsert = !nested
  if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) {
    return                          // 是组件 VNode，走 data.hook.init 那条路，这里就结束
  }

  const data = vnode.data
  const children = vnode.children
  const tag = vnode.tag
  if (isDef(tag)) {
    // 省略：开发环境下的未知标签警告
    vnode.elm = vnode.ns
      ? nodeOps.createElementNS(vnode.ns, tag)
      : nodeOps.createElement(tag, vnode)         // 元素造出来了，还在文档外面
    setScope(vnode)

    createChildren(vnode, children, insertedVnodeQueue)   // 递归：整棵子树先建完
    if (isDef(data)) {
      invokeCreateHooks(vnode, insertedVnodeQueue)        // attrs / class / style / 事件在这一步落上去
    }
    insert(parentElm, vnode.elm, refElm)                  // 最后才把自己挂进父节点
  } else if (isTrue(vnode.isComment)) {
    vnode.elm = nodeOps.createComment(vnode.text)
    insert(parentElm, vnode.elm, refElm)
  } else {
    vnode.elm = nodeOps.createTextNode(vnode.text)
    insert(parentElm, vnode.elm, refElm)
  }
}

if (isUndef(vnode.text)) {
  if (isDef(oldCh) && isDef(ch)) {
    // 两边都有子节点：交给 updateChildren，也就是双端比较那一段
    if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)
  } else if (isDef(ch)) {
    // 只有新的有子节点：旧的是文本就先清空，再把新子树整批建出来
    if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '')
    addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
  } else if (isDef(oldCh)) {
    // 只有旧的有子节点：整批删掉
    removeVnodes(oldCh, 0, oldCh.length - 1)
  } else if (isDef(oldVnode.text)) {
    nodeOps.setTextContent(elm, '')
  }
} else if (oldVnode.text !== vnode.text) {
  nodeOps.setTextContent(elm, vnode.text)
}

function removeVnodes (vnodes, startIdx, endIdx) {
  for (; startIdx <= endIdx; ++startIdx) {
    const ch = vnodes[startIdx]
    if (isDef(ch)) {
      if (isDef(ch.tag)) {
        removeAndInvokeRemoveHook(ch)   // 一条线：把这个元素从文档里摘下来
        invokeDestroyHook(ch)           // 另一条线：递归地跑销毁钩子
      } else {
        removeNode(ch.elm)              // 文本节点，没有钩子可跑
      }
    }
  }
}

function invokeDestroyHook (vnode) {
  let i, j
  const data = vnode.data
  if (isDef(data)) {
    if (isDef(i = data.hook) && isDef(i = i.destroy)) i(vnode)   // 组件在这里被 $destroy
    for (i = 0; i < cbs.destroy.length; ++i) cbs.destroy[i](vnode)
  }
  if (isDef(i = vnode.children)) {
    for (j = 0; j < vnode.children.length; ++j) {
      invokeDestroyHook(vnode.children[j])   // 递归，子节点一个都不漏
    }
  }
}

installComponentHooks(data)      // 往 data.hook 上装 init / prepatch / insert / destroy

const name = Ctor.options.name || tag
const vnode = new VNode(
  `vue-component-${Ctor.cid}${name ? `-${name}` : ''}`,   // tag 是拼出来的，不是 'child'
  data,
  undefined,                     // children 是 undefined —— 插槽内容不放这儿
  undefined, undefined, context,
  { Ctor, propsData, listeners, tag, children },          // 这一坨就是 componentOptions
  asyncFactory
)

const Child = { template: '<p>hi</p>' };
const vm = new Vue({
  components: { Child },
  template: '<div><child /></div>'
}).$mount('#app');

const child = vm.$children[0];
console.log(child.$vnode.tag);                       // vue-component-1-child
console.log(child._vnode.tag);                       // p
console.log(child._vnode.parent === child.$vnode);   // true
console.log(child.$vnode.elm === child.$el);         // true
console.log(vm._vnode.children[0] === child.$vnode); // true

export enum ShapeFlags {
  ELEMENT = 1,
  FUNCTIONAL_COMPONENT = 1 << 1,       // 2
  STATEFUL_COMPONENT = 1 << 2,         // 4
  TEXT_CHILDREN = 1 << 3,              // 8
  ARRAY_CHILDREN = 1 << 4,             // 16
  SLOTS_CHILDREN = 1 << 5,             // 32
  TELEPORT = 1 << 6,                   // 64
  SUSPENSE = 1 << 7,                   // 128
  COMPONENT_SHOULD_KEEP_ALIVE = 1 << 8,
  COMPONENT_KEPT_ALIVE = 1 << 9,
  COMPONENT = ShapeFlags.STATEFUL_COMPONENT | ShapeFlags.FUNCTIONAL_COMPONENT
}

const patch = (n1, n2, container, anchor = null, /* … */ optimized = !!n2.dynamicChildren) => {
  if (n1 === n2) return
  if (n1 && !isSameVNodeType(n1, n2)) {
    anchor = getNextHostNode(n1)
    unmount(n1, parentComponent, parentSuspense, true)
    n1 = null                          // 类型不同：旧的直接卸载，下面按新建处理
  }
  if (n2.patchFlag === PatchFlags.BAIL) {
    optimized = false                  // -2：放弃优化，退回全量比对
    n2.dynamicChildren = null
  }
  const { type, ref, shapeFlag } = n2
  switch (type) {
    case Text:     processText(n1, n2, container, anchor); break
    case Comment:  processCommentNode(n1, n2, container, anchor); break
    case Static:   /* 省略：静态节点整块插入，更新时什么都不做 */ break
    case Fragment: processFragment(n1, n2, container, anchor, /* … */); break
    default:
      if (shapeFlag & ShapeFlags.ELEMENT)        processElement(n1, n2, container, /* … */)
      else if (shapeFlag & ShapeFlags.COMPONENT) processComponent(n1, n2, container, /* … */)
      else if (shapeFlag & ShapeFlags.TELEPORT)  type.process(n1, n2, container, /* … */)
      else if (shapeFlag & ShapeFlags.SUSPENSE)  type.process(n1, n2, container, /* … */)
  }
}

function isSameVNodeType (n1, n2) {
  return n1.type === n2.type && n1.key === n2.key
}

const blockStack = []
let currentBlock = null

export function openBlock (disableTracking = false) {
  blockStack.push(currentBlock = disableTracking ? null : [])
}

function setupBlock (vnode) {
  // 收集期间攒下来的动态节点，整个挂到这个 block 根节点上
  vnode.dynamicChildren = isBlockTreeEnabled > 0 ? currentBlock || EMPTY_ARR : null
  closeBlock()
  if (isBlockTreeEnabled > 0 && currentBlock) currentBlock.push(vnode)
  return vnode
}

// createBaseVNode 的末尾：有 patchFlag 或者是组件，就登记进当前 block
if (isBlockTreeEnabled > 0 && !isBlockNode && currentBlock &&
    (vnode.patchFlag > 0 || shapeFlag & ShapeFlags.COMPONENT) &&
    vnode.patchFlag !== PatchFlags.NEED_HYDRATION) {
  currentBlock.push(vnode)
}

const { patchFlag, dynamicChildren } = n2
if (dynamicChildren) {
  // 是 block：只比编译期挑出来的那些节点，静态的一个都不看
  patchBlockChildren(n1.dynamicChildren, dynamicChildren, el, parentComponent, /* … */)
} else if (!optimized) {
  // 手写 render / JSX：没有 block，老老实实全量比子节点
  patchChildren(n1, n2, el, null, parentComponent, /* … */)
}

const patchBlockChildren = (oldChildren, newChildren, fallbackContainer, /* … */) => {
  for (let i = 0; i < newChildren.length; i++) {
    const oldVNode = oldChildren[i]
    const newVNode = newChildren[i]
    // 省略：挑 container —— Fragment、类型变了、组件这几种情况要取真实父节点
    patch(oldVNode, newVNode, container, null, /* … */)   // 下标一一对应，不需要 key
  }
}