new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Vue · Guide · all subjects

performance/reactivity

4 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Deep reactivity overhead in Vue

Vue's reactivity system is deep by default. While this makes state management intuitive, it does create overhead when the data size is large, because every property access triggers proxy traps that perform dependency tracking. This typically becomes noticeable when dealing with large arrays of deeply nested objects, where a single render needs to access 100,000+ properties.

Using shallowRef and shallowReactive for immutable structures

Vue provides shallowRef() and shallowReactive() to opt-out of deep reactivity. Shallow APIs create state that is reactive only at the root level and exposes all nested objects untouched. This keeps nested property access fast, with the trade-off being that all nested objects must be treated as immutable, and updates can only be triggered by replacing the root state.

shallowRef example with array mutations

With shallowRef, const shallowArray = shallowRef([/* big list */]); shallowArray.value.push(newObject) won't trigger updates, but shallowArray.value = [...shallowArray.value, newObject] does. Similarly, shallowArray.value[0].foo = 1 won't trigger updates, but spreading and replacing the array will.

attrs object not reactive for performance

The attrs object always reflects the latest fallthrough attributes but is not reactive for performance reasons. Watchers cannot observe its changes. Use props for reactivity or onUpdated() to perform side effects with the latest attrs on each update.

Give your agent this brain