vue Architecture Docs
Home / Function/ updateStyle() — vue Function Reference

updateStyle() — vue Function Reference

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

Function typescript WebPlatform RuntimeDirectives calls 6

Entity Profile

Dependency Diagram

graph TD
  bb6b3e47_4412_613f_a390_b2681286129d["updateStyle()"]
  299f2646_f776_9b7d_1179_7b9087b1e66c["isUndef()"]
  bb6b3e47_4412_613f_a390_b2681286129d -->|calls| 299f2646_f776_9b7d_1179_7b9087b1e66c
  29ec91dc_3cc1_b618_1af1_f0fdc215fd73["normalizeStyleBinding()"]
  bb6b3e47_4412_613f_a390_b2681286129d -->|calls| 29ec91dc_3cc1_b618_1af1_f0fdc215fd73
  5b855538_2046_796e_16f9_7327a61399cb["isDef()"]
  bb6b3e47_4412_613f_a390_b2681286129d -->|calls| 5b855538_2046_796e_16f9_7327a61399cb
  133969d0_a7bd_f1c5_46a3_9fb8fd249583["extend()"]
  bb6b3e47_4412_613f_a390_b2681286129d -->|calls| 133969d0_a7bd_f1c5_46a3_9fb8fd249583
  57f662e9_6308_3a96_2b4b_c4b139354113["getStyle()"]
  bb6b3e47_4412_613f_a390_b2681286129d -->|calls| 57f662e9_6308_3a96_2b4b_c4b139354113
  311fb23f_f8ca_2e0c_855b_13518ffc8566["setProp()"]
  bb6b3e47_4412_613f_a390_b2681286129d -->|calls| 311fb23f_f8ca_2e0c_855b_13518ffc8566
  style bb6b3e47_4412_613f_a390_b2681286129d 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)
  }
}

Domain

Subdomains

Calls

Source

Frequently Asked Questions

What does updateStyle() do?
updateStyle() is a function in the vue codebase.
What does updateStyle() call?
updateStyle() calls 6 function(s): extend, getStyle, isDef, isUndef, normalizeStyleBinding, setProp.

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free