defineReadonlyProperty() — vue Function Reference

Architecture documentation for the defineReadonlyProperty() function in readonly.ts from the vue codebase.

Function typescript VueCore Observer calls 1 called by 1

Entity Profile

VueCore→ Observer→ defineReadonlyProperty() — vue Function Reference

Dependency Diagram

graph TD
  ad2f42ad_9bf1_770f_7f96_d8954e41b1a7["defineReadonlyProperty()"]
  8420591a_8fdc_59a9_134d_e2c52487724c["readonly.ts"]
  ad2f42ad_9bf1_770f_7f96_d8954e41b1a7 -->|defined in| 8420591a_8fdc_59a9_134d_e2c52487724c
  654a6eae_ac65_7684_a219_7d7993c2aac4["createReadonly()"]
  654a6eae_ac65_7684_a219_7d7993c2aac4 -->|calls| ad2f42ad_9bf1_770f_7f96_d8954e41b1a7
  a5c1c2cc_1bd9_a30d_1ec0_fcb3ad3e90cf["readonly()"]
  ad2f42ad_9bf1_770f_7f96_d8954e41b1a7 -->|calls| a5c1c2cc_1bd9_a30d_1ec0_fcb3ad3e90cf
  style ad2f42ad_9bf1_770f_7f96_d8954e41b1a7 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/v3/reactivity/readonly.ts lines 99–117

function defineReadonlyProperty(
  proxy: any,
  target: any,
  key: string,
  shallow: boolean
) {
  Object.defineProperty(proxy, key, {
    enumerable: true,
    configurable: true,
    get() {
      const val = target[key]
      return shallow || !isPlainObject(val) ? val : readonly(val)
    },
    set() {
      __DEV__ &&
        warn(`Set operation on key "${key}" failed: target is readonly.`)
    }
  })
}