Function useShallowReactive

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

This hook version allows the reactive object 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 reactive for a shallow reactive object. 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 = useShallowReactive(() => ({
  foo: 1,
  nested: {
    bar: 2
  }
}))

// mutating state's own properties is reactive
state.foo++

// ...but does not convert nested objects
isReactive(state.nested) // false

// NOT reactive
state.nested.bar++

See

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