updateStyle() — vue Function Reference

Architecture documentation for the updateStyle() function in style.ts from the vue codebase.

Function typescript WebPlatform WebRuntime calls 1

Entity Profile

WebPlatform→ WebRuntime→ updateStyle() — vue Function Reference

Dependency Diagram

graph TD
  003a8cc5_e342_06e8_ebe9_d399cfdefe0a["updateStyle()"]
  39bcf580_b87a_fcd4_c4dc_38d5e8e0495a["style.ts"]
  003a8cc5_e342_06e8_ebe9_d399cfdefe0a -->|defined in| 39bcf580_b87a_fcd4_c4dc_38d5e8e0495a
  7b0a1c4d_a609_ae95_b6a4_79306b7d0902["setProp()"]
  003a8cc5_e342_06e8_ebe9_d399cfdefe0a -->|calls| 7b0a1c4d_a609_ae95_b6a4_79306b7d0902
  style 003a8cc5_e342_06e8_ebe9_d399cfdefe0a fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/platforms/web/runtime/modules/style.ts lines 57–97

function updateStyle(oldVnode: VNodeWithData, vnode: VNodeWithData) {
  const data = vnode.data
  const oldData = oldVnode.data

  if (
    isUndef(data.staticStyle) &&
    isUndef(data.style) &&
    isUndef(oldData.staticStyle) &&
    isUndef(oldData.style)
  ) {
    return
  }

  let cur, name
  const el: any = vnode.elm
  const oldStaticStyle: any = oldData.staticStyle
  const oldStyleBinding: any = oldData.normalizedStyle || oldData.style || {}

  // if static style exists, stylebinding already merged into it when doing normalizeStyleData
  const oldStyle = oldStaticStyle || oldStyleBinding

  const style = normalizeStyleBinding(vnode.data.style) || {}

  // store normalized style under a different key for next diff
  // make sure to clone it if it's reactive, since the user likely wants
  // to mutate it.
  vnode.data.normalizedStyle = isDef(style.__ob__) ? extend({}, style) : style

  const newStyle = getStyle(vnode, true)

  for (name in oldStyle) {
    if (isUndef(newStyle[name])) {
      setProp(el, name, '')
    }
  }
  for (name in newStyle) {
    cur = newStyle[name]
    // ie9 setting to null has no effect, must use empty string
    setProp(el, name, cur == null ? '' : cur)
  }
}