shallowRef()
A ref that only tracks reassignment of .value, not deep mutations.
Syntax
shallowRef<T>(value?: T): ShallowRef<T>Parameters
| Name | Type | Required | Description |
|---|---|---|---|
value | T | No | The initial inner value. |
Returns
ShallowRef<T> — A ref reactive only on .value replacement.
Examples
<script setup lang="ts">
import { shallowRef, triggerRef } from 'vue';
const state = shallowRef({ count: 0 });
// mutating a nested prop does NOT trigger updates:
state.value.count++;
triggerRef(state); // force update if you mutated in place
// replacing .value DOES trigger:
state.value = { count: 1 };
</script>
Notes
Use shallowRef for large immutable structures or external instances (charts,
editors) where deep reactivity is unnecessary overhead. Only assigning a new
.value triggers reactivity; call triggerRef() to force an update after an
in-place mutation.