How does Vue's virtual DOM and compiler make updates efficient?

Summary

Templates are compiled into render functions that produce virtual DOM. Vue's compiler adds hints: static content is hoisted and skipped on updates, dynamic nodes get patch flags describing what can change (text, class, props), and block trees collect dynamic nodes so the diff only visits those. Combined with fine-grained reactivity, a change re-renders only affected components and patches only dynamic parts.

Longer Answer

This 'compiler-informed virtual DOM' is why Vue rarely needs manual memoisation like React.memo. Hand-written render functions and JSX lose some of these optimisations. Vue's team has also been developing Vapor Mode, a compilation strategy that skips the virtual DOM for opted-in components.

Key Points

• Templates compile to render functions.
• Static hoisting, patch flags, block trees.
• Component-level fine-grained updates.
• Less manual memoisation.