Vue——patch.ts【十四】

来源:https://www.cnblogs.com/wangyang0210/archive/2023/04/09/17300671.html
-Advertisement-
Play Games

前言 前面我們簡單的瞭解了 vue 初始化時的一些大概的流程,這裡我們擴展下 Vue 的 patch。 內容 這一塊主要圍繞 vue 中的__patch__進行剖析。 __patch__ Vue.prototype.__patch__的方法位於scr/platforms/web/runtime/in ...


前言

前面我們簡單的瞭解了 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 klasseventsdomPropsstyletransitionrefdirectives

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 = 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 = 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 = 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
}
學無止境,謙卑而行.
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一、基礎知識 1.1 Linux系統的文件結構 /bin 二進位文件,系統常規命令 /boot 系統啟動分區,系統啟動時讀取的文件 /dev 設備文件 /etc 大多數配置文件 /home 普通用戶的家目錄 /lib 32位函數庫 /lib64 64位庫 /media 手動臨時掛載點 /mnt 手動 ...
  • 痞子衡嵌入式半月刊: 第 75 期 這裡分享嵌入式領域有用有趣的項目/工具以及一些熱點新聞,農曆年分二十四節氣,希望在每個交節之日準時發佈一期。 本期刊是開源項目(GitHub: JayHeng/pzh-mcu-bi-weekly),歡迎提交 issue,投稿或推薦你知道的嵌入式那些事兒。 上期回顧 ...
  • 無論是Window,MacOs,Linux均採用多用戶的管理模式進行許可權管理。 在Linux系統中,擁有最大許可權的賬戶名為:root(超級管理員)。 root用戶擁有最大的系統操作許可權,而普通用戶在許多地方的許可權是受限的。 普通用戶一般在HOME目錄是不受限制的,一旦出了HOME目錄,大多地方,僅有 ...
  • 鎖屏面試題百日百刷,每個工作日堅持更新面試題。請看到最後就能獲取你想要的,接下來的是今日的面試題: 1.Hbase中的memstore是用來做什麼的? hbase為了保證隨機讀取的性能,所以hfile裡面的rowkey是有序的。當客戶端的請求在到達regionserver之後,為了保證寫入rowke ...
  • 你準備好面試了嗎?這裡有一些面試中可能會問到的問題以及相對應的答案。 1、集群的最主要瓶頸 磁碟IO 2、Hadoop運行模式 單機版、偽分散式模式、完全分散式模式 3、Hadoop生態圈的組件並做簡要描述 Zookeeper:是一個開源的分散式應用程式協調服務,基於zookeeper可以實現同步服 ...
  • MAUI 實現圖片上傳功能 1、Mainpage.xmal 中進行調用 代碼如下 <Image x:Name="Image_Upload" Source="{Binding User.HeaderImg}" /> <Button Text="上傳" Clicked="UploadImage_Clic ...
  • Echarts的Map學習記錄 Map介紹 Echarts 中的地圖(Map)是一種可視化展示地理數據的圖表類型,可以用來展示各地區的地理位置、熱力分佈、人口密度、經濟發展水平等各種地理數據。地圖圖表可以被分為兩類:常規地圖和熱力圖。其中,常規地圖可以展示不同區域的地理位置和大小,熱力圖可以用來展示 ...
  • vue2.7 源碼中,nextTick並沒有直接使用某個 API ,而是採用了優雅降級的方案去實現非同步更新。我們額外維護了一個 callbacks,用於存儲 nextTick 回調 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...