createPatchFunction() — vue Function Reference

Architecture documentation for the createPatchFunction() function in patch.ts from the vue codebase.

Function typescript CoreRuntime VirtualDOM calls 5

Entity Profile

CoreRuntime→ VirtualDOM→ createPatchFunction() — vue Function Reference

Dependency Diagram

graph TD
  3bb2ae4b_c366_ee68_8304_5578e138a454["createPatchFunction()"]
  0df06241_48e0_316d_48c2_6f91c7a049b1["patch.ts"]
  3bb2ae4b_c366_ee68_8304_5578e138a454 -->|defined in| 0df06241_48e0_316d_48c2_6f91c7a049b1
  4a8e5e8b_321f_34e6_ce9b_68e90d9b717d["cloneVNode()"]
  3bb2ae4b_c366_ee68_8304_5578e138a454 -->|calls| 4a8e5e8b_321f_34e6_ce9b_68e90d9b717d
  e4d4b46d_5073_fac6_177d_53fc5028052b["registerRef()"]
  3bb2ae4b_c366_ee68_8304_5578e138a454 -->|calls| e4d4b46d_5073_fac6_177d_53fc5028052b
  c48f2bd8_6020_4edf_01ad_950addd6de62["sameVnode()"]
  3bb2ae4b_c366_ee68_8304_5578e138a454 -->|calls| c48f2bd8_6020_4edf_01ad_950addd6de62
  8a79fd0e_46ca_b056_3bc3_56040185a03e["createKeyToOldIdx()"]
  3bb2ae4b_c366_ee68_8304_5578e138a454 -->|calls| 8a79fd0e_46ca_b056_3bc3_56040185a03e
  4b47a246_a6fe_7a21_1238_3f5ce49d861f["traverse()"]
  3bb2ae4b_c366_ee68_8304_5578e138a454 -->|calls| 4b47a246_a6fe_7a21_1238_3f5ce49d861f
  style 3bb2ae4b_c366_ee68_8304_5578e138a454 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/core/vdom/patch.ts lines 66–907

export function createPatchFunction(backend) {
  let i, j
  const cbs: any = {}

  const { modules, nodeOps } = backend

  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]])
      }
    }
  }

  function emptyNodeAt(elm) {
    return new VNode(nodeOps.tagName(elm).toLowerCase(), {}, [], undefined, elm)
  }

  function createRmCb(childElm, listeners) {
    function remove() {
      if (--remove.listeners === 0) {
        removeNode(childElm)
      }
    }
    remove.listeners = listeners
    return remove
  }

  function removeNode(el) {
    const parent = nodeOps.parentNode(el)
    // element may have already been removed due to v-html / v-text
    if (isDef(parent)) {
      nodeOps.removeChild(parent, el)
    }
  }

  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)
    )
  }

  let creatingElmInVPre = 0

  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 = ownerArray[index] = cloneVNode(vnode)
    }

    vnode.isRootInsert = !nested // for transition enter check
    if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) {
      return
    }

    const data = vnode.data
    const children = vnode.children
    const tag = vnode.tag