javascript / intermediate
Snippet
Shallow Reactivity for Heavy Data
The shallowReactive function creates a reactive proxy that only tracks changes at the root level. Nested objects are not converted to proxies. This provides a significant performance boost when handling large, complex data structures where you only need to react to top-level property swaps.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
import { shallowReactive } from 'vue';const state = shallowReactive({user: 'Sam',metadata: { lastLogin: '2023-01-01' }});// state.user is reactive// state.metadata properties are NOT reactive
vue
Breakdown
1
shallowReactive({ ... })
Creates a reactive object that avoids deep traversal of its properties.
2
user: 'Sam'
Changes to this root property will trigger component re-renders.
3
metadata: { ... }
The object itself is reactive, but changes within its fields (e.g. lastLogin) are ignored by Vue.