⬅️ Back to Table of Contents

📄 toReactive

📊 Analysis Summary

Metric	Count
🔧 Functions	1
📦 Imports	5
🟢 Vue Composition API	2

📚 Table of Contents

• Imports
• Vue Composition API
• Functions

🛠️ File Location:

📂 packages/shared/toReactive/index.ts

📦 Imports

Name	Source
MaybeRef	vue
UnwrapNestedRefs	vue
isRef	vue
reactive	vue
unref	vue

---

Vue Composition API

Name	Type	Reactive Variables	Composables
reactive	reactive	none	none
reactive	reactive	none	none

---

Functions

toReactive(objectRef: MaybeRef<T>): UnwrapNestedRefs<T>

Converts ref to reactive.

Parameters:

• objectRef any: A ref of object

See: https://vueuse.org/toReactive

Raw JSDoc

/**
 * Converts ref to reactive.
 *
 * @see https://vueuse.org/toReactive
 * @param objectRef A ref of object
 */

Calls:

• isRef (from vue)
• reactive (from vue)
• unref (from vue)
• Reflect.get
• Reflect.deleteProperty
• Reflect.has
• Object.keys

Code

export function toReactive<T extends object>(
  objectRef: MaybeRef<T>,
): UnwrapNestedRefs<T> {
  if (!isRef(objectRef))
    return reactive(objectRef)

  const proxy = new Proxy({}, {
    get(_, p, receiver) {
      return unref(Reflect.get(objectRef.value, p, receiver))
    },
    set(_, p, value) {
      if (isRef((objectRef.value as any)[p]) && !isRef(value))
        (objectRef.value as any)[p].value = value
      else
        (objectRef.value as any)[p] = value
      return true
    },
    deleteProperty(_, p) {
      return Reflect.deleteProperty(objectRef.value, p)
    },
    has(_, p) {
      return Reflect.has(objectRef.value, p)
    },
    ownKeys() {
      return Object.keys(objectRef.value)
    },
    getOwnPropertyDescriptor() {
      return {
        enumerable: true,
        configurable: true,
      }
    },
  })

  return reactive(proxy) as UnwrapNestedRefs<T>
}

---

Generated by Syntax Scribe