_update() — vue Function Reference

Architecture documentation for the _update() function in directives.ts from the vue codebase.

Function typescript CoreRuntime VirtualDOM calls 2 called by 1

Entity Profile

CoreRuntime→ VirtualDOM→ _update() — vue Function Reference

Dependency Diagram

graph TD
  0479eac9_5df3_020d_a364_dc6eb24f49f3["_update()"]
  8dce6c3f_4a73_cd05_13cf_97c1f249a21d["directives.ts"]
  0479eac9_5df3_020d_a364_dc6eb24f49f3 -->|defined in| 8dce6c3f_4a73_cd05_13cf_97c1f249a21d
  5829fc2c_31fa_8c47_0b7b_5d88f9d4b3c5["updateDirectives()"]
  5829fc2c_31fa_8c47_0b7b_5d88f9d4b3c5 -->|calls| 0479eac9_5df3_020d_a364_dc6eb24f49f3
  b747b395_46cc_92a9_9d9e_eaa294a22739["normalizeDirectives()"]
  0479eac9_5df3_020d_a364_dc6eb24f49f3 -->|calls| b747b395_46cc_92a9_9d9e_eaa294a22739
  d43e4463_1e94_bd27_ddb6_976c6d01d70f["callHook()"]
  0479eac9_5df3_020d_a364_dc6eb24f49f3 -->|calls| d43e4463_1e94_bd27_ddb6_976c6d01d70f
  style 0479eac9_5df3_020d_a364_dc6eb24f49f3 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/core/vdom/modules/directives.ts lines 22–84

function _update(oldVnode, vnode) {
  const isCreate = oldVnode === emptyNode
  const isDestroy = vnode === emptyNode
  const oldDirs = normalizeDirectives(
    oldVnode.data.directives,
    oldVnode.context
  )
  const newDirs = normalizeDirectives(vnode.data.directives, vnode.context)

  const dirsWithInsert: any[] = []
  const dirsWithPostpatch: any[] = []

  let key, oldDir, dir
  for (key in newDirs) {
    oldDir = oldDirs[key]
    dir = newDirs[key]
    if (!oldDir) {
      // new directive, bind
      callHook(dir, 'bind', vnode, oldVnode)
      if (dir.def && dir.def.inserted) {
        dirsWithInsert.push(dir)
      }
    } else {
      // existing directive, update
      dir.oldValue = oldDir.value
      dir.oldArg = oldDir.arg
      callHook(dir, 'update', vnode, oldVnode)
      if (dir.def && dir.def.componentUpdated) {
        dirsWithPostpatch.push(dir)
      }
    }
  }

  if (dirsWithInsert.length) {
    const callInsert = () => {
      for (let i = 0; i < dirsWithInsert.length; i++) {
        callHook(dirsWithInsert[i], 'inserted', vnode, oldVnode)
      }
    }
    if (isCreate) {
      mergeVNodeHook(vnode, 'insert', callInsert)
    } else {
      callInsert()
    }
  }

  if (dirsWithPostpatch.length) {
    mergeVNodeHook(vnode, 'postpatch', () => {
      for (let i = 0; i < dirsWithPostpatch.length; i++) {
        callHook(dirsWithPostpatch[i], 'componentUpdated', vnode, oldVnode)
      }
    })
  }

  if (!isCreate) {
    for (key in oldDirs) {
      if (!newDirs[key]) {
        // no longer present, unbind
        callHook(oldDirs[key], 'unbind', oldVnode, oldVnode, isDestroy)
      }
    }
  }
}