前言

前面我們簡單的了解了 vue 初始化時的一些大概的流程，這里我們擴展下 Vue 的 patch，

內容

這一塊主要圍繞 vue 中的__patch__進行剖析，

patch

Vue.prototype.__patch__的方法位于scr/platforms/web/runtime/index.ts中；

// install platform patch function
// 判斷是否是瀏覽器環境，是就賦予patch否則就賦予空函式
Vue.prototype.__patch__ = inBrowser ? patch : noop

patch.ts

patch.ts位于src/platforms/web/runtime/patch.ts

?> 虛擬 DOM 演算法基于snabbdom進行修改

// the directive module should be applied last, after all
// built-in modules have been applied.
// 在應用了所有內置模塊之后，最后再應用指令模塊
const modules = platformModules.concat(baseModules)
// 創建patch函式
export const patch: Function = createPatchFunction({ nodeOps, modules })

nodeOps

nodeOps引入于src/platforms/web/runtime/node-ops.ts，封裝了 DOM 操作的 API；

import VNode from 'core/vdom/vnode'
import { namespaceMap } from 'web/util/index'

// 創建一個由標簽名稱 tagName 指定的 HTML 元素
// https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createElement
export function createElement(tagName: string, vnode: VNode): Element {
  const elm = document.createElement(tagName)
  if (tagName !== 'select') {
    return elm
  }
  // false or null will remove the attribute but undefined will not
  // false或者null將會移除這個屬性但是undefined不會
  // vnode?.data?.attrs?.multiple !== undefined
  if (
    vnode.data &&
    vnode.data.attrs &&
    vnode.data.attrs.multiple !== undefined
  ) {
    // select元素增加multiple屬性
    elm.setAttribute('multiple', 'multiple')
  }
  return elm
}

// 創建一個具有指定的命名空間 URI 和限定名稱的元素
// https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createElementNS
export function createElementNS(namespace: string, tagName: string): Element {
  return document.createElementNS(namespaceMap[namespace], tagName)
}

// 創建一個新的文本節點，這個方法可以用來轉義 HTML 字符，
// https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createTextNode
export function createTextNode(text: string): Text {
  return document.createTextNode(text)
}

// 創建一個注釋節點
// https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createComment
export function createComment(text: string): Comment {
  return document.createComment(text)
}
// 在參考節點之前插入一個擁有指定父節點的子節點
// https://developer.mozilla.org/zh-CN/docs/Web/API/Node/insertBefore
export function insertBefore(
  parentNode: Node,
  newNode: Node,
  referenceNode: Node
) {
  // referenceNode 參考節點不是可選引數——你必須顯式傳入一個 Node 或者 null，
  // 如果不提供節點或者傳入無效值，在不同的瀏覽器中會有不同的表現
  parentNode.insertBefore(newNode, referenceNode)
}

// 從 DOM 中洗掉一個子節點，會回傳洗掉的節點，
// https://developer.mozilla.org/zh-CN/docs/Web/API/Node/removeChild
export function removeChild(node: Node, child: Node) {
  node.removeChild(child)
}
// 將一個節點附加到指定父節點的子節點串列的末尾處會回傳附加的節點物件
// https://developer.mozilla.org/zh-CN/docs/Web/API/Node/appendChild
// 這里有一個新的方法ParentNode.append()
// 兩者不同之處
// Element.append() allows you to also append string objects, whereas Node.appendChild() only accepts Node objects.
// Element.append()允許添加DOMString 物件，而 Node.appendChild() 只接受 Node 物件
// Element.append() has no return value, whereas Node.appendChild() returns the appended Node object.
// Element.append() 沒有回傳值，而 Node.appendChild() 回傳追加的 Node 物件，
// Element.append() can append several nodes and strings, whereas Node.appendChild() can only append one node.
// Element.append() 可以追加多個節點和字串，而 Node.appendChild() 只能追加一個節點，
export function appendChild(node: Node, child: Node) {
  node.appendChild(child)
}

// 回傳指定的節點在 DOM 樹中的父節點
// https://developer.mozilla.org/zh-CN/docs/Web/API/Node/parentNode
export function parentNode(node: Node) {
  return node.parentNode
}

// 回傳其父節點的 childNodes 串列中緊跟在其后面的節點,其實就是回傳指定節點的兄弟節點
// https://developer.mozilla.org/zh-CN/docs/Web/API/Node/nextSibling
export function nextSibling(node: Node) {
  return node.nextSibling
}

// 回傳指定節點的標簽名
// https://developer.mozilla.org/zh-CN/docs/Web/API/Element/tagName
export function tagName(node: Element): string {
  return node.tagName
}

// 為指定節點設定文本內容
// https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent
// 比 innerHTML更好的性能(因為不會決議html)而且可以防止xss的攻擊
// textContent 和 innerText 的區別
// textContent 會獲取所有元素的內容，包括 <script> 和 <style> 元素， innerText 只展示給人看的元素，
// textContent 會回傳節點中的每一個元素，相反，innerText 受 CSS 樣式的影響，并且不會回傳隱藏元素的文本，
// 此外，由于 innerText 受 CSS 樣式的影響，它會觸發回流（ reflow ）去確保是最新的計算樣式，（回流在計算上可能會非常昂貴，因此應盡可能避免，）
// 與 textContent 不同的是，在 Internet Explorer (小于和等于 11 的版本) 中對 innerText 進行修改，
// 不僅會移除當前元素的子節點，而且還會永久性地破壞所有后代文本節點，在之后不可能再次將節點再次插入到任何其他元素或同一元素中，
export function setTextContent(node: Node, text: string) {
  node.textContent = text
}

// 為指定節點設定scopeId屬性
// https://developer.mozilla.org/zh-CN/docs/Web/API/Element/setAttribute
export function setStyleScope(node: Element, scopeId: string) {
  node.setAttribute(scopeId, '')
}

modules

主要是內置的一些模塊方法，如：attrs klass，events，domProps，style，transition，ref，directives

createPatchFunction

createPatchFunction 中包含了emptyNodeAt,createRmCb,removeNode, isUnknownElement, createElm, createComponent, initComponent, reactivateComponent, insert, createChildren, isPatchable, invokeCreateHooks, setScope, addVnodes, invokeDestroyHook, removeVnodes, removeAndInvokeRemoveHook, updateChildren, checkDuplicateKeys, findIdxInOld, patchVnode, invokeInsertHook, isRenderedModule, hydrate, assertNodeMatch, patch共 26 個函式；

鉤子遍歷

// hooks  ['create', 'activate', 'update', 'remove', 'destroy']
// modules  [attrs, klass, events, domProps, style, transition, ref, directives]
// 遍歷hooks鉤子并在modules中判斷是否存在對應的方法
// 存在就push到cbs中
for (i = 0; i < hooks.length; ++i) {
  cbs[hooks[i]] = []
  for (j = 0; j < modules.length; ++j) {
    if (isDef(modules[j][hooks[i]])) {
      cbs[hooks[i]].push(modules[j][hooks[i]])
    }
  }
}

emptyNodeAt

// 創建一個vnode節點
// 獲取傳入元素的小寫標簽名并創建對應空的虛擬DOM
function emptyNodeAt(elm) {
  return new VNode(nodeOps.tagName(elm).toLowerCase(), {}, [], undefined, elm)
}

createRmCb

// 創建remove函式
// 要移除某個節點需先把監聽器全部移除
function createRmCb(childElm, listeners) {
  function remove() {
    if (--remove.listeners === 0) {
      removeNode(childElm)
    }
  }
  remove.listeners = listeners
  return remove
}

removeNode

// 移除節點
function removeNode(el) {
  // 找到指定節點的父節點
  const parent = nodeOps.parentNode(el)
  // element may have already been removed due to v-html / v-text
  // 元素可能已經由于v-html/v-text被洗掉
  // 父節點存在則移除父節點的下該節點
  if (isDef(parent)) {
    nodeOps.removeChild(parent, el)
  }
}

isUnknownElement

// 是否是未知的元素標簽
// 如果自定元素存在ignoredElementse就回傳false不使用isUnknownElement進行校驗
// https://v2.cn.vuejs.org/v2/api/#ignoredElements
function isUnknownElement(vnode, inVPre) {
  return (
    !inVPre &&
    !vnode.ns &&
    !(
      config.ignoredElements.length &&
      config.ignoredElements.some(ignore => {
        return isRegExp(ignore) ? ignore.test(vnode.tag) : ignore === vnode.tag
      })
    ) &&
    config.isUnknownElement(vnode.tag)
  )
}

createElm

// 創建元素
function createElm(
  vnode,
  insertedVnodeQueue,
  parentElm?: any,
  refElm?: any,
  nested?: any,
  ownerArray?: any,
  index?: any
) {
  // 節點已經被渲染，克隆節點
  if (isDef(vnode.elm) && isDef(ownerArray)) {
    // This vnode was used in a previous render!
    // now it's used as a new node, overwriting its elm would cause
    // potential patch errors down the road when it's used as an insertion
    // reference node. Instead, we clone the node on-demand before creating
    // associated DOM element for it.
    // 此vnode已在以前的渲染中使用！
    // 現在它被用作一個新節點，當它被用作插入參考節點時，覆寫它的elm將導致潛在的補丁錯誤，
    // 相反，我們在為節點創建關聯的DOM元素之前按需克隆節點，
    vnode = ownerArray[index] = cloneVNode(vnode)
  }

  vnode.isRootInsert = !nested // for transition enter check
  // 創建組件
  if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) {
    // 如果是創建組件節點且成功創建，createComponent回傳 true，createElm直接return，
    return
  }

  const data = https://www.cnblogs.com/wangyang0210/archive/2023/04/09/vnode.data
  const children = vnode.children
  const tag = vnode.tag
  if (isDef(tag)) {
    // 存在tag的情況

    // 開發環境下會對tag進行校驗
    if (__DEV__) {
      // 跳過這個元素和它的子元素的編譯程序，可以用來顯示原始 Mustache 標簽，跳過大量沒有指令的節點會加快編譯，
      // https://v2.cn.vuejs.org/v2/api/#v-pre
      if (data && data.pre) {
        // 節點上存在pre屬性就對creatingElmInVPre標識進行+1操作
        creatingElmInVPre++
      }
      if (isUnknownElement(vnode, creatingElmInVPre)) {
        warn('Unknown custom element: <' +
            tag +
            '> - did you ' +
            'register the component correctly? For recursive components, ' +
            'make sure to provide the "name" option.',
          vnode.context
        )
      }
    }

    // 通過傳入節點的tag，創建相應的標簽元素，賦值給 vnode.elm 進行占位
    // 如果存在命名空間就呼叫createElementNS創建帶有命名空間元素否則就呼叫createElement創建正常元素
    vnode.elm = vnode.ns
      ? nodeOps.createElementNS(vnode.ns, tag)
      : nodeOps.createElement(tag, vnode)
    // 設定CSS作用域
    setScope(vnode)

    // 創建子節點
    createChildren(vnode, children, insertedVnodeQueue)

    if (isDef(data)) {
      // 呼叫create鉤子
      invokeCreateHooks(vnode, insertedVnodeQueue)
    }

    // 插入父元素
    insert(parentElm, vnode.elm, refElm)

    if (__DEV__ && data && data.pre) {
      creatingElmInVPre--
    }
  } 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)
  }
}

createComponent

// 創建組件
function createComponent(vnode, insertedVnodeQueue, parentElm, refElm) {
  let i = vnode.data
  if (isDef(i)) {
    // vnode.data存在

    // 存在組件實體且為keep-alive組件
    const isReactivated = isDef(vnode.componentInstance) && i.keepAlive
    // 子組件呼叫init執行初始化，創建子組件實體進行子組件掛載
    if (isDef((i = i.hook)) && isDef((i = i.init))) {
      i(vnode, false /* hydrating */)
    }
    // after calling the init hook, if the vnode is a child component
    // it should've created a child instance and mounted it. the child
    // component also has set the placeholder vnode's elm.
    // in that case we can just return the element and be done.
    //在呼叫init鉤子之后，如果vnode是一個子組件，它應該創建一個子實體并掛載它，該子組件還設定了占位符vnode的elm，
    //在這種情況下，我們可以回傳元素并完成，

    if (isDef(vnode.componentInstance)) {
      initComponent(vnode, insertedVnodeQueue)
      // 將子組件節點插入父元素中
      insert(parentElm, vnode.elm, refElm)
      if (isTrue(isReactivated)) {
        // 如果是keep-alive組件則激活組件
        reactivateComponent(vnode, insertedVnodeQueue, parentElm, refElm)
      }
      return true
    }
  }
}

initComponent

// 初始化組件
function initComponent(vnode, insertedVnodeQueue) {
  // 存在pendingInsert就插入vnode佇列中
  if (isDef(vnode.data.pendingInsert)) {
    insertedVnodeQueue.push.apply(insertedVnodeQueue, vnode.data.pendingInsert)
    vnode.data.pendingInsert = null
  }

  //賦予vnode.elm進行占位
  vnode.elm = vnode.componentInstance.$el

  if (isPatchable(vnode)) {
    // 觸發create鉤子
    invokeCreateHooks(vnode, insertedVnodeQueue)
    // 設定CSS作用域
    setScope(vnode)
  } else {
    // empty component root.
    // 空的根組件
    // skip all element-related modules except for ref (#3455)
    // 跳過除ref之外的所有與元素相關的模塊

    // 注冊ref
    registerRef(vnode)
    // make sure to invoke the insert hook
    // 確保呼叫了insert鉤子
    insertedVnodeQueue.push(vnode)
  }
}

reactivateComponent

// 激活組件 | 針對keep-alive組件
function reactivateComponent(vnode, insertedVnodeQueue, parentElm, refElm) {
  let i
  // hack for #4339: a reactivated component with inner transition
  // does not trigger because the inner node's created hooks are not called
  // again. It's not ideal to involve module-specific logic in here but
  // there doesn't seem to be a better way to do it.
  // #4339的破解：具有內部轉換的重新激活組件不會觸發，
  // 因為內部節點創建的鉤子不會被再次呼叫，
  // 在這里涉及特定于模塊的邏輯并不理想，但似乎沒有更好的方法，
  let innerNode = vnode
  while (innerNode.componentInstance) {
    innerNode = innerNode.componentInstance._vnode
    // 呼叫activate鉤子方法
    if (isDef((i = innerNode.data)) && isDef((i = i.transition))) {
      for (i = 0; i < cbs.activate.length; ++i) {
        cbs.activate[i](emptyNode, innerNode)
      }
      // 將節點推入佇列
      insertedVnodeQueue.push(innerNode)
      break
    }
  }
  // unlike a newly created component,
  // a reactivated keep-alive component doesn't insert itself
  // 不同于新創建的組件， 重新激活的keep-alive組件不會插入自身
  insert(parentElm, vnode.elm, refElm)
}

insert

function insert(parent, elm, ref) {
  if (isDef(parent)) {
    if (isDef(ref)) {
      if (nodeOps.parentNode(ref) === parent) {
        nodeOps.insertBefore(parent, elm, ref)
      }
    } else {
      nodeOps.appendChild(parent, elm)
    }
  }
}

createChildren

// 創建子節點
function createChildren(vnode, children, insertedVnodeQueue) {
  if (isArray(children)) {
    if (__DEV__) {
      checkDuplicateKeys(children)
    }
    for (let i = 0; i < children.length; ++i) {
      // 子節點是陣列話就遍歷呼叫createElm
      createElm(
        children[i],
        insertedVnodeQueue,
        vnode.elm,
        null,
        true,
        children,
        i
      )
    }
  } else if (isPrimitive(vnode.text)) {
    // 文本節點是直接追加
    nodeOps.appendChild(vnode.elm, nodeOps.createTextNode(String(vnode.text)))
  }
}

isPatchable

function isPatchable(vnode) {
  // 存在組件實體就將組件實體下的_vnode賦值給vnode
  while (vnode.componentInstance) {
    vnode = vnode.componentInstance._vnode
  }
  // 回傳標簽名
  return isDef(vnode.tag)
}

// 執行所有傳入節點下的create方法
function invokeCreateHooks(vnode, insertedVnodeQueue) {
  for (let i = 0; i < cbs.create.length; ++i) {
    cbs.create[i](emptyNode, vnode)
  }
  i = vnode.data.hook // Reuse variable
  if (isDef(i)) {
    if (isDef(i.create)) i.create(emptyNode, vnode)
    if (isDef(i.insert)) insertedVnodeQueue.push(vnode)
  }
}

setScope

// set scope id attribute for scoped CSS.
// this is implemented as a special case to avoid the overhead
// of going through the normal attribute patching process.
// 設定CSS的作用域id屬性，
// 這是作為一種特殊情況來實作的，以避免經過正常屬性修補程序的開銷，
function setScope(vnode) {
  let i
  if (isDef((i = vnode.fnScopeId))) {
    nodeOps.setStyleScope(vnode.elm, i)
  } else {
    let ancestor = vnode
    while (ancestor) {
      if (isDef((i = ancestor.context)) && isDef((i = i.$options._scopeId))) {
        nodeOps.setStyleScope(vnode.elm, i)
      }
      ancestor = ancestor.parent
    }
  }
  // for slot content they should also get the scopeId from the host instance.
  // 對于插槽內容，他們還應該從主機實體中獲取scopeId，
  if (
    isDef((i = activeInstance)) &&
    i !== vnode.context &&
    i !== vnode.fnContext &&
    isDef((i = i.$options._scopeId))
  ) {
    nodeOps.setStyleScope(vnode.elm, i)
  }
}

addVnodes

// 在指定索引范圍內添加節點
function addVnodes(
  parentElm,
  refElm,
  vnodes,
  startIdx,
  endIdx,
  insertedVnodeQueue
) {
  for (; startIdx <= endIdx; ++startIdx) {
    createElm(
      vnodes[startIdx],
      insertedVnodeQueue,
      parentElm,
      refElm,
      false,
      vnodes,
      startIdx
    )
  }
}

invokeDestroyHook

// 銷毀節點，其實就是執行destroy鉤子方法
function invokeDestroyHook(vnode) {
  let i, j
  const data = https://www.cnblogs.com/wangyang0210/archive/2023/04/09/vnode.data
  if (isDef(data)) {
    if (isDef((i = data.hook)) && isDef((i = i.destroy))) i(vnode)
    for (i = 0; i < cbs.destroy.length; ++i) cbs.destroy[i](vnode)
  }
  // 如果存在子節點就遞回呼叫invokeDestroyHook
  if (isDef((i = vnode.children))) {
    for (j = 0; j < vnode.children.length; ++j) {
      invokeDestroyHook(vnode.children[j])
    }
  }
}

removeVnodes

// 移除指定索引范圍內的節點
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 {
        // Text node
        removeNode(ch.elm)
      }
    }
  }
}

removeAndInvokeRemoveHook

// 移除并呼叫remove的鉤子方法
function removeAndInvokeRemoveHook(vnode, rm?: any) {
  if (isDef(rm) || isDef(vnode.data)) {
    let i
    const listeners = cbs.remove.length + 1
    if (isDef(rm)) {
      // we have a recursively passed down rm callback
      // increase the listeners count
      rm.listeners += listeners
    } else {
      // directly removing
      rm = createRmCb(vnode.elm, listeners)
    }
    // recursively invoke hooks on child component root node
    // 遞回呼叫子組件根節點商的鉤子
    if (
      isDef((i = vnode.componentInstance)) &&
      isDef((i = i._vnode)) &&
      isDef(i.data)
    ) {
      removeAndInvokeRemoveHook(i, rm)
    }
    for (i = 0; i < cbs.remove.length; ++i) {
      // 呼叫remove鉤子
      cbs.remove[i](vnode, rm)
    }
    if (isDef((i = vnode.data.hook)) && isDef((i = i.remove))) {
      i(vnode, rm)
    } else {
      rm()
    }
  } else {
    removeNode(vnode.elm)
  }
}

updateChildren

// 更新子節點
function updateChildren(
  parentElm,
  oldCh,
  newCh,
  insertedVnodeQueue,
  removeOnly
) {
  // 老節點開始索引
  let oldStartIdx = 0
  // 新節點開始索引
  let newStartIdx = 0
  // 老節點結束索引
  let oldEndIdx = oldCh.length - 1
  // 老節點第一個節點
  let oldStartVnode = oldCh[0]
  // 老節點最后一個節點
  let oldEndVnode = oldCh[oldEndIdx]
  // 新節點開始索引
  let newEndIdx = newCh.length - 1
  // 新節點第一個節點
  let newStartVnode = newCh[0]
  // 新節點最后一個節點
  let newEndVnode = newCh[newEndIdx]

  // key和索引的映射關系 | 新節點對應的老節點的oldIdx | 需要移動的老節點 | 錨點
  let oldKeyToIdx, idxInOld, vnodeToMove, refElm

  // removeOnly is a special flag used only by <transition-group>
  // to ensure removed elements stay in correct relative positions
  // during leaving transitions
  // removeOnly是一個特殊標志，僅在＜transition group＞使用，以確保移除的元素在離開過渡期間保持在正確的相對位置
  const canMove = !removeOnly

  // dev環境下會檢查組件的新節點的key是否存在重復的情況
  if (__DEV__) {
    checkDuplicateKeys(newCh)
  }
  // 對新老節點進行遍歷，任意一個遍歷完成就結束遍歷
  while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
    if (isUndef(oldStartVnode)) {
      // 如果老節點第一個節點不存在則移動到下一個索引
      oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left
    } else if (isUndef(oldEndVnode)) {
      // 如果老節點最后一個節點不存在則上移索引
      oldEndVnode = oldCh[--oldEndIdx]
    } else if (sameVnode(oldStartVnode, newStartVnode)) {
      // 新老節點頭節點為同一個節點,進行patch
      patchVnode(
        oldStartVnode,
        newStartVnode,
        insertedVnodeQueue,
        newCh,
        newStartIdx
      )
      // 新老節點鈞后移(右移)
      oldStartVnode = oldCh[++oldStartIdx]
      newStartVnode = newCh[++newStartIdx]
    } else if (sameVnode(oldEndVnode, newEndVnode)) {
      // 新老節點尾節點為同一個節點,執行patch
      patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx)
      // 新老節點前移(左移)
      oldEndVnode = oldCh[--oldEndIdx]
      newEndVnode = newCh[--newEndIdx]
    } else if (sameVnode(oldStartVnode, newEndVnode)) {
      // 老節點頭節點和新節點尾節點是同一個節點,執行patch
      // Vnode moved right
      patchVnode(
        oldStartVnode,
        newEndVnode,
        insertedVnodeQueue,
        newCh,
        newEndIdx
      )
      // 針對transition group情況進行處理
      canMove &&
        nodeOps.insertBefore(
          parentElm,
          oldStartVnode.elm,
          nodeOps.nextSibling(oldEndVnode.elm)
        )
      // 老節點右移
      oldStartVnode = oldCh[++oldStartIdx]
      // 新節點左移
      newEndVnode = newCh[--newEndIdx]
    } else if (sameVnode(oldEndVnode, newStartVnode)) {
      // 老節點尾節點和新節點頭節點是同一節點,執行patch
      // Vnode moved left
      patchVnode(
        oldEndVnode,
        newStartVnode,
        insertedVnodeQueue,
        newCh,
        newStartIdx
      )
      // 針對transition group情況進行處理
      canMove &&
        nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
      // 老節點左移
      oldEndVnode = oldCh[--oldEndIdx]
      // 新節點右移
      newStartVnode = newCh[++newStartIdx]
    } else {
      // 老節點下的key和索引的關系映射
      if (isUndef(oldKeyToIdx))
        oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
      // 在映射中找到新節點在老節點的索引
      idxInOld = isDef(newStartVnode.key)
        ? oldKeyToIdx[newStartVnode.key]
        : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
      if (isUndef(idxInOld)) {
        // 新元素執行創建
        // New element
        createElm(
          newStartVnode,
          insertedVnodeQueue,
          parentElm,
          oldStartVnode.elm,
          false,
          newCh,
          newStartIdx
        )
      } else {
        // 找到對應的節點開始進行對比
        vnodeToMove = oldCh[idxInOld]
        if (sameVnode(vnodeToMove, newStartVnode)) {
          // 兩個節點是同一個執行patch
          patchVnode(
            vnodeToMove,
            newStartVnode,
            insertedVnodeQueue,
            newCh,
            newStartIdx
          )
          // patch之后將老節點設定為undefined
          oldCh[idxInOld] = undefined
          canMove &&
            nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
        } else {
          // 兩個節點不是同一個節點就作為新元素創建
          // same key but different element. treat as new element
          createElm(
            newStartVnode,
            insertedVnodeQueue,
            parentElm,
            oldStartVnode.elm,
            false,
            newCh,
            newStartIdx
          )
        }
      }
      // 新節點后移
      newStartVnode = newCh[++newStartIdx]
    }
  }

  if (oldStartIdx > oldEndIdx) {
    // 老節點遍歷完成新節點還有元素
    refElm = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm
    // 作為新增節點進行添加
    addVnodes(
      parentElm,
      refElm,
      newCh,
      newStartIdx,
      newEndIdx,
      insertedVnodeQueue
    )
  } else if (newStartIdx > newEndIdx) {
    // 新節點遍歷完成,老節點有剩余進行移除
    removeVnodes(oldCh, oldStartIdx, oldEndIdx)
  }
}

checkDuplicateKeys

// 檢查傳入節點的key是否重復
function checkDuplicateKeys(children) {
  const seenKeys = {}
  for (let i = 0; i < children.length; i++) {
    const vnode = children[i]
    const key = vnode.key
    if (isDef(key)) {
      if (seenKeys[key]) {
        warn(
          `Duplicate keys detected: '${key}'. This may cause an update error.`,
          vnode.context
        )
      } else {
        seenKeys[key] = true
      }
    }
  }
}

findIdxInOld

function findIdxInOld(node, oldCh, start, end) {
  for (let i = start; i < end; i++) {
    const c = oldCh[i]
    if (isDef(c) && sameVnode(node, c)) return i
  }
}

patchVnode

// 更新節點
function patchVnode(
  oldVnode,
  vnode,
  insertedVnodeQueue,
  ownerArray,
  index,
  removeOnly?: any
) {
  // 新老節點一致不錯處理直接回傳
  if (oldVnode === vnode) {
    return
  }

  if (isDef(vnode.elm) && isDef(ownerArray)) {
    // clone reused vnode
    vnode = ownerArray[index] = cloneVNode(vnode)
  }

  const elm = (vnode.elm = oldVnode.elm)

  // 異步占位符
  if (isTrue(oldVnode.isAsyncPlaceholder)) {
    if (isDef(vnode.asyncFactory.resolved)) {
      hydrate(oldVnode.elm, vnode, insertedVnodeQueue)
    } else {
      vnode.isAsyncPlaceholder = true
    }
    return
  }

  // reuse element for static trees.
  // note we only do this if the vnode is cloned -
  // if the new node is not cloned it means the render functions have been
  // reset by the hot-reload-api and we need to do a proper re-render.
  if (
    isTrue(vnode.isStatic) &&
    isTrue(oldVnode.isStatic) &&
    vnode.key === oldVnode.key &&
    (isTrue(vnode.isCloned) || isTrue(vnode.isOnce))
  ) {
    // 均是靜態節點
    // key相同
    // 新節點被克隆或存在v-once指令
    // 將實體賦予新節點
    vnode.componentInstance = oldVnode.componentInstance
    return
  }

  let i
  const data = https://www.cnblogs.com/wangyang0210/archive/2023/04/09/vnode.data
  if (isDef(data) && isDef((i = data.hook)) && isDef((i = i.prepatch))) {
    // 執行組件的prepatch
    i(oldVnode, vnode)
  }

  // 老節點的children
  const oldCh = oldVnode.children
  // 新節點的children
  const ch = vnode.children
  if (isDef(data) && isPatchable(vnode)) {
    // 呼叫update鉤子
    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)
  }
  // 文本節點
  if (isUndef(vnode.text)) {
    if (isDef(oldCh) && isDef(ch)) {
      if (oldCh !== ch)
        // 新老節點都存在children,則進行遞回diff
        updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)
    } else if (isDef(ch)) {
      // 僅新節點存在children
      if (__DEV__) {
        // 開發環境下檢查新節點下的children key值是否重復
        checkDuplicateKeys(ch)
      }
      // 老節點是文本節點則進行重置,文本內容置空
      if (isDef(oldVnode.text)) nodeOps.setTextContent(elm,'')
      // 添加新節點創建元素
      addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
    } else if (isDef(oldCh)) {
      // 僅老節點存在children,新節點不存在
      // 移除老節點的children
      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)
  }
  if (isDef(data)) {
    // 呼叫postpatch鉤子
    if (isDef((i = data.hook)) && isDef((i = i.postpatch))) i(oldVnode, vnode)
  }
}

invokeInsertHook

// 呼叫insert鉤子函式
function invokeInsertHook(vnode, queue, initial) {
  // delay insert hooks for component root nodes, invoke them after the
  // element is really inserted
  // 延遲組件根節點的insert鉤子函式，在真正插入元素后呼叫它們
  if (isTrue(initial) && isDef(vnode.parent)) {
    vnode.parent.data.pendingInsert = queue
  } else {
    for (let i = 0; i < queue.length; ++i) {
      queue[i].data.hook.insert(queue[i])
    }
  }
}

assertNodeMatch

// 判斷節點是否匹配
function assertNodeMatch(node, vnode, inVPre) {
  if (isDef(vnode.tag)) {
    return (
      vnode.tag.indexOf('vue-component') === 0 ||
      (!isUnknownElement(vnode, inVPre) &&
        vnode.tag.toLowerCase() ===
          (node.tagName && node.tagName.toLowerCase()))
    )
  } else {
    return node.nodeType === (vnode.isComment ? 8 : 3)
  }
}

assertNodeMatch

// 判斷節點是否匹配 (ssr) | dev環境下進行的檢查
function assertNodeMatch(node, vnode, inVPre) {
  if (isDef(vnode.tag)) {
    return (
      vnode.tag.indexOf('vue-component') === 0 ||
      (!isUnknownElement(vnode, inVPre) &&
        vnode.tag.toLowerCase() ===
          (node.tagName && node.tagName.toLowerCase()))
    )
  } else {
    return node.nodeType === (vnode.isComment ? 8 : 3)
  }
}

patch

// 回傳一個patch函式對后續的節點進行patch操作 || todo
return function patch(oldVnode, vnode, hydrating, removeOnly) {
  if (isUndef(vnode)) {
    // 如果新節點不存在, 但老節點存在, 則呼叫destroy鉤子函式對老節點進行銷毀
    if (isDef(oldVnode)) invokeDestroyHook(oldVnode)
    // 如果新節點不存在, 老節點也不存在，直接return不用做任何操作
    return
  }

  // 是否是初始化patch的標識
  let isInitialPatch = false
  // 插入虛擬節點的佇列
  const insertedVnodeQueue: any[] = []

  // 判斷是否存在老節點
  if (isUndef(oldVnode)) {
    // empty mount (likely as component), create new root element
    // 空掛載（型別于組件），創建一個新的根元素
    // 不存在老節點
    isInitialPatch = true
    // 首次初始化patch
    createElm(vnode, insertedVnodeQueue)
  } else {
    // 判斷老節點是否是真實元素
    const isRealElement = isDef(oldVnode.nodeType)
    // 不是真實元素且為同一節點
    if (!isRealElement && sameVnode(oldVnode, vnode)) {
      // patch existing root node
      patchVnode(oldVnode, vnode, insertedVnodeQueue, null, null, removeOnly)
    } else {
      if (isRealElement) {
        // mounting to a real element
        // check if this is server-rendered content and if we can perform
        // a successful hydration.
        // 掛載到一個真實的元素，
        // 檢查這是否是服務端渲染(SSR)的內容，
        // 以及我們是否可以成功執行hydration，
        if (oldVnode.nodeType === 1 && oldVnode.hasAttribute(SSR_ATTR)) {
          oldVnode.removeAttribute(SSR_ATTR)
          hydrating = true
        }
        if (isTrue(hydrating)) {
          // 是服務端渲染且hydrate成功
          if (hydrate(oldVnode, vnode, insertedVnodeQueue)) {
            // 呼叫insert鉤子
            invokeInsertHook(vnode, insertedVnodeQueue, true)
            return oldVnode
          } else if (__DEV__) {
            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.
        // 不是服務端渲染或者hydration失敗
        // create an empty node and replace it
        // 創建一個空節點代替老節點
        oldVnode = emptyNodeAt(oldVnode)
      }

      // replacing existing element
      // 獲取老節點元素
      const oldElm = oldVnode.elm
      // 獲取老節點的父元素
      const parentElm = nodeOps.parentNode(oldElm)

      // create new node
      // 基于新節點創建一個dom樹
      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)
        // 極為罕見的邊緣情況：如果舊元素處于離開過渡，則不要插入，
        // 只有當結合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) {
          // 呼叫destroy鉤子
          for (let i = 0; i < cbs.destroy.length; ++i) {
            cbs.destroy[i](ancestor)
          }
          ancestor.elm = vnode.elm
          if (patchable) {
            // 呼叫create鉤子
            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.
            // 呼叫可能已通過創建鉤子合并的插入鉤子，
            // 例如，對于使用“inserted”鉤子的指令，

            const insert = ancestor.data.hook.insert
            if (insert.merged) {
              // start at index 1 to avoid re-invoking component mounted hook
              // 從索引1開始,避免重新呼叫組件的mounted鉤子
              for (let i = 1; i < insert.fns.length; i++) {
                insert.fns[i]()
              }
            }
          } else {
            // 注冊ref
            registerRef(ancestor)
          }
          ancestor = ancestor.parent
        }
      }

      // destroy old node
      // 銷毀老節點
      if (isDef(parentElm)) {
        removeVnodes([oldVnode], 0, 0)
      } else if (isDef(oldVnode.tag)) {
        invokeDestroyHook(oldVnode)
      }
    }
  }
  // 呼叫insert鉤子
  invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch)
  return vnode.elm
}

學無止境,謙卑而行.

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/549588.html

標籤：其他

上一篇：記錄-VueJs中如何使用Teleport組件

下一篇：Vue2異步更新及nextTick原理

Vue——patch.ts【十四】

前言

內容

__patch__

patch.ts

nodeOps

modules

createPatchFunction

鉤子遍歷

emptyNodeAt

createRmCb

removeNode

isUnknownElement

createElm

createComponent

initComponent

reactivateComponent

insert

createChildren

isPatchable

setScope

addVnodes

invokeDestroyHook

removeVnodes

removeAndInvokeRemoveHook

updateChildren

checkDuplicateKeys

findIdxInOld

patchVnode

invokeInsertHook

assertNodeMatch

assertNodeMatch

patch

patch