javascript / expert
Snippet
Performance Optimization with shallowRef
By default, ref() performs deep reactivity conversion. For extremely large datasets or third-party class instances, this overhead is significant. shallowRef() only tracks the .value property itself, drastically improving performance for immutable patterns or large collections.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
import { shallowRef, triggerRef } from 'vue';const largeArray = shallowRef([/* millions of items */]);// This will NOT trigger reactivitylargeArray.value.push(newItem);// Manually trigger updates for performance gainstriggerRef(largeArray);
vue
Breakdown
1
const largeArray = shallowRef([...]);
Creates a ref that only tracks assignment to .value, not internal mutations.
2
largeArray.value.push(newItem);
Modifies the internal array without triggering expensive proxy overhead.
3
triggerRef(largeArray);
Explicitly notifies subscribers that the internal state has changed.