genClassForVnode() — vue Function Reference

Architecture documentation for the genClassForVnode() function in class.ts from the vue codebase.

Function typescript VueCore VDom calls 2

Entity Profile

VueCore→ VDom→ genClassForVnode() — vue Function Reference

Dependency Diagram

graph TD
  0eabb501_dadb_fa1c_7e8c_842565374a57["genClassForVnode()"]
  7d865290_63ef_852b_c606_147816b9dc05["class.ts"]
  0eabb501_dadb_fa1c_7e8c_842565374a57 -->|defined in| 7d865290_63ef_852b_c606_147816b9dc05
  b68eb362_2ec5_dd23_3782_33b2fe8cf645["mergeClassData()"]
  0eabb501_dadb_fa1c_7e8c_842565374a57 -->|calls| b68eb362_2ec5_dd23_3782_33b2fe8cf645
  0f18f6d3_b4f3_41c9_2064_ee723d3c0316["renderClass()"]
  0eabb501_dadb_fa1c_7e8c_842565374a57 -->|calls| 0f18f6d3_b4f3_41c9_2064_ee723d3c0316
  style 0eabb501_dadb_fa1c_7e8c_842565374a57 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/platforms/web/util/class.ts lines 5–22

export function genClassForVnode(vnode: VNodeWithData): string {
  let data = vnode.data
  let parentNode: VNode | VNodeWithData | undefined = vnode
  let childNode: VNode | VNodeWithData = vnode
  while (isDef(childNode.componentInstance)) {
    childNode = childNode.componentInstance._vnode!
    if (childNode && childNode.data) {
      data = mergeClassData(childNode.data, data)
    }
  }
  // @ts-expect-error parentNode.parent not VNodeWithData
  while (isDef((parentNode = parentNode.parent))) {
    if (parentNode && parentNode.data) {
      data = mergeClassData(data, parentNode.data)
    }
  }
  return renderClass(data.staticClass!, data.class)
}