createReadonly() — vue Function Reference

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

Function typescript CompilerSFC TemplateTransformer calls 5 called by 2

Entity Profile

CompilerSFC→ TemplateTransformer→ createReadonly() — vue Function Reference

Dependency Diagram

graph TD
  ccd19137_b11e_4069_105d_a9c9c66236df["createReadonly()"]
  34b8a3ca_39bf_16b0_04a2_fe04ca2a4860["readonly()"]
  34b8a3ca_39bf_16b0_04a2_fe04ca2a4860 -->|calls| ccd19137_b11e_4069_105d_a9c9c66236df
  6796a061_0d9c_024b_cb91_306774923938["shallowReadonly()"]
  6796a061_0d9c_024b_cb91_306774923938 -->|calls| ccd19137_b11e_4069_105d_a9c9c66236df
  f24256c8_9eca_68b6_8f30_e4517554c31b["isCollectionType()"]
  ccd19137_b11e_4069_105d_a9c9c66236df -->|calls| f24256c8_9eca_68b6_8f30_e4517554c31b
  f10bb288_275c_a84b_2a0c_83a96cd68f2f["isReadonly()"]
  ccd19137_b11e_4069_105d_a9c9c66236df -->|calls| f10bb288_275c_a84b_2a0c_83a96cd68f2f
  f00627f9_f6f9_0415_07cf_adaab8eba795["isRef()"]
  ccd19137_b11e_4069_105d_a9c9c66236df -->|calls| f00627f9_f6f9_0415_07cf_adaab8eba795
  f510a797_01c9_4b79_7634_e77112e3ed58["isShallow()"]
  ccd19137_b11e_4069_105d_a9c9c66236df -->|calls| f510a797_01c9_4b79_7634_e77112e3ed58
  03ff7d5f_6de5_c7b0_6a9f_80d0602b34a1["defineReadonlyProperty()"]
  ccd19137_b11e_4069_105d_a9c9c66236df -->|calls| 03ff7d5f_6de5_c7b0_6a9f_80d0602b34a1
  style ccd19137_b11e_4069_105d_a9c9c66236df fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/v3/reactivity/readonly.ts lines 44–97

function createReadonly(target: any, shallow: boolean) {
  if (!isPlainObject(target)) {
    if (__DEV__) {
      if (isArray(target)) {
        warn(`Vue 2 does not support readonly arrays.`)
      } else if (isCollectionType(target)) {
        warn(
          `Vue 2 does not support readonly collection types such as Map or Set.`
        )
      } else {
        warn(`value cannot be made readonly: ${typeof target}`)
      }
    }
    return target as any
  }

  if (__DEV__ && !Object.isExtensible(target)) {
    warn(
      `Vue 2 does not support creating readonly proxy for non-extensible object.`
    )
  }

  // already a readonly object
  if (isReadonly(target)) {
    return target as any
  }

  // already has a readonly proxy
  const existingFlag = shallow ? rawToShallowReadonlyFlag : rawToReadonlyFlag
  const existingProxy = target[existingFlag]
  if (existingProxy) {
    return existingProxy
  }

  const proxy = Object.create(Object.getPrototypeOf(target))
  def(target, existingFlag, proxy)

  def(proxy, ReactiveFlags.IS_READONLY, true)
  def(proxy, ReactiveFlags.RAW, target)

  if (isRef(target)) {
    def(proxy, RefFlag, true)
  }
  if (shallow || isShallow(target)) {
    def(proxy, ReactiveFlags.IS_SHALLOW, true)
  }

  const keys = Object.keys(target)
  for (let i = 0; i < keys.length; i++) {
    defineReadonlyProperty(proxy, target, keys[i], shallow)
  }

  return proxy as any
}