javascript / intermediate
Snippet
Performance Optimization with shallowRef
Unlike ref(), shallowRef() does not perform deep reactivity conversion. Only the .value access is reactive, meaning changes to nested properties won't trigger updates. This is critical for performance when handling large datasets.
snippet.js
1
2
3
const largeList = shallowRef([{ id: 1, metadata: { ...veryLargeObject } }]);
vue
Breakdown
1
const largeList = shallowRef([
Initialize a shallow reactive reference for an array or large object.
2
{ id: 1, metadata: { ... } }
Properties inside these objects are not tracked by Vue's proxy system, saving memory.