Function useShallowReadonly

The hook version of shallowReadonly from @vue/reactivity. In addition to values accepted by shallowReadonly, 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.

---

Shallow version of ().

Unlike (), there is no deep conversion: only root-level properties are made readonly. Property values are stored and exposed as-is - this also means properties with ref values will not be automatically unwrapped.

Example

// Inside a function component:
const state = useShallowReadonly(() => ({
  foo: 1,
  nested: {
    bar: 2
  }
}))

// mutating state's own properties will fail
state.foo++

// ...but works on nested objects
isReadonly(state.nested) // false

// works
state.nested.bar++

See

https://vuejs.org/api/reactivity-advanced.html#shallowreadonly