Explain patch flags and static hoisting in Vue 3's compiler

WHAT THIS TESTS: This question tests whether you understand that Vue 3's compiler is not just a syntax translator but a performance optimizer that communicates with the runtime. The interviewer wants to see that you grasp compiler-informed virtual DOM, where static analysis produces metadata that makes patching granular and skips unnecessary work.

A GOOD ANSWER COVERS: First, define patch flags as bitwise identifiers generated by the compiler. When the template parser sees dynamic bindings like class, style, text content, or props, it marks the resulting vnode with a flag such as TEXT_CHILDREN, CLASS, or PROPS. During the patch phase, the runtime reads this bitmap and performs only the specific update needed instead of recursively comparing the entire subtree. Second, explain static hoisting as the compiler lifting completely static nodes and trees out of the render function into a constant. Because these nodes never change, they are created once and reused across every render call, which means the diffing algorithm can skip them entirely. Third, connect both concepts to the broader idea that Vue 3 does not eliminate the virtual DOM but makes it smarter by leveraging compile-time information to reduce runtime overhead.

COMMON WRONG ANSWERS: A major red flag is claiming that Vue 3 removes the virtual DOM entirely or that these optimizations make Vue faster than everything else by default. Another mistake is describing patch flags as runtime heuristics rather than compile-time annotations. Candidates also err by saying static hoisting is just memoization; it is actually extraction to module scope or constants outside the render closure.

LIKELY FOLLOW-UPS: The interviewer may ask how patch flags affect component slots or whether hoisted static trees can contain event listeners. They might also probe the difference between a fully static tree and a tree with one dynamic root, or ask how this impacts server-side rendering hydration.

ONE CONCRETE EXAMPLE: Imagine a component with a div containing a static icon SVG and a dynamic count span. The compiler hoists the entire SVG into a constant because no bindings touch it. The span receives a patch flag for TEXT_CHILDREN. When count increments, the runtime sees the flag on the span, updates only the text node, and skips the SVG subtree completely.