performance/update

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

Props stability for child component updates

In Vue, a child component only updates when at least one of its received props has changed. To minimize unnecessary updates, keep the props passed to child components as stable as possible. Instead of passing computed values that change frequently, compute the value in the parent component and pass a stable boolean or result to the child.

Props stability example

When passing :active-id="activeId" to multiple ListItem components in a v-for loop, every item updates when activeId changes. Instead, compute in the parent and pass :active="item.id === activeId", so most components' props remain stable and don't need to update.

v-once directive for static content

v-once is a built-in directive that can be used to render content that relies on runtime data but never needs to update. The entire sub-tree it is used on will be skipped for all future updates.

v-memo directive for conditional update skipping

v-memo is a built-in directive that can be used to conditionally skip the update of large sub-trees or v-for lists.

Composition API fine-grained reactivity reduces need for child update optimization

Vue's fine-grained reactivity system ensures child components only update when they need to. There is no need to manually cache callback functions to avoid unnecessary child updates. Manual child-update optimizations are rarely a concern for Vue developers, unlike in React where useCallback optimization is almost always needed.

Cache static optimization

Parts of a template with no dynamic bindings are cached. The renderer creates vnodes during initial render, caches them, and reuses the same vnodes for every subsequent re-render, completely skipping diffing when the old and new vnodes are identical. Multiple consecutive static elements are condensed into a single static vnode containing plain HTML string, mounted by directly setting innerHTML.

Patch flags mechanism

Patch flags encode the type of update each element needs directly in the vnode creation call as a number. An element can have multiple patch flags merged into a single number. The runtime renderer checks flags using bitwise operations to determine necessary work. Bitwise checks are extremely fast, allowing Vue to do the least amount of work necessary when updating elements with dynamic bindings.

Tree flattening optimization

A block is a part of a template with stable inner structure. Each block tracks descendant nodes with patch flags, not just direct children. During re-render, only the flattened array of dynamic descendant nodes needs traversal instead of the full tree, greatly reducing nodes traversed during virtual DOM reconciliation. Static parts are effectively skipped. v-if and v-for directives create new block nodes while maintaining stable structure for parent blocks.

Give your agent this brain