Function useReadonly

The hook version of readonly from @vue/reactivity. In addition to values accepted by readonly, you can also pass an initializer function returning the value.

This hook version allows the readonly ref to be created when the component first renders, then cached for future re-renders. If you pass in an initializer function, it will only be called on first render.

---

Takes an object (reactive or plain) or a ref and returns a readonly proxy to the original.

A readonly proxy is deep: any nested property accessed will be readonly as well. It also has the same ref-unwrapping behavior as (), except the unwrapped values will also be made readonly.

Example

// Inside a function component:
const original = useReactive({ count: 0 })

const copy = useReadonly(original)

useEffect(() => {
  // works for reactivity tracking
  console.log(copy.count)
})

// mutating original will trigger watchers relying on the copy
original.count++

// mutating the copy will fail and result in a warning
copy.count++ // warning!

See

https://vuejs.org/api/reactivity-core.html#readonly