Advanced Reactivity: shallowRef and triggerRef
shallowRef for performance, markRaw to exclude from reactivity, triggerRef for manual trigger.
Beyond ref and reactive
Vue’s deep reactivity is convenient but not always what you want. For large objects or external instances, deep tracking is wasteful. Vue offers shallowRef, triggerRef, and markRaw for fine control.
How ref Tracks Deeply
A normal ref holding an object makes the entire object deeply reactive — mutating any nested property triggers updates. Great for small state, costly for big structures.
import { ref } from "vue"
const user = ref({ name: "Ada", prefs: { theme: "dark" } })
user.value.prefs.theme = "light" // triggers update (deep)All lessons in this course
- Advanced Reactivity: shallowRef and triggerRef
- Composable Factories and Parameterized Composables
- State Machines with XState in Vue
- effectScope for Grouped Effects