How is a Vue template compiled into a render function?

WHAT THIS TESTS: Your understanding of the compile-time boundary between Vue's declarative template syntax and its imperative virtual DOM layer. The interviewer wants to know if you realize that templates are not interpreted by the browser at runtime; instead they are compiled ahead of time into JavaScript render functions that return vnode trees. They also want to see that you know directives are not special runtime constructs but are desugared into plain JavaScript control flow and property assignments during compilation.

A GOOD ANSWER COVERS: Four things in order. First, the big picture: the template compiler takes HTML-like markup and produces a JavaScript render function. This function uses the h() helper to create vnodes, which are plain objects with type, props, children, and key. Second, the fate of structural directives. v-if is compiled into a conditional expression or if/else block that returns different vnode branches, while v-for is compiled into an array iteration such as a map call that returns a list of vnodes. Third, event handling. v-on becomes an onXxx property inside the vnode props object passed to h(), so onClick receives the handler function directly. Fourth, the absence of directives at runtime. The generated code contains no directive tokens; it is just a function that executes JavaScript and returns a tree of vnodes, which Vue's diffing engine then patches into the DOM.

COMMON WRONG ANSWERS: Three red flags stand out. One, claiming that the browser parses v-if or v-for directly, which confuses Vue templates with native HTML or web components. Two, saying directives remain as metadata attached to vnodes during the diffing process; in reality they are resolved at compile time into imperative logic. Three, describing the process as a runtime interpreter that walks the template string on every update, rather than a one-time compilation into a render function that re-executes when reactive dependencies change.

LIKELY FOLLOW-UPS: The interviewer may ask how you would write a complex template by hand using render functions, to confirm you understand the mapping. They might ask about the performance implications of template compilation versus hand-written render functions, or how the compiler handles edge cases like keyed v-for nodes or nested conditionals. Another common follow-up is how custom directives differ from built-in ones during compilation, or what happens to template refs.

ONE CONCRETE EXAMPLE: Consider a template containing a ul element with a v-for iterating over items to produce li children, alongside a v-if that conditionally renders the entire list. The compiled render function would look conceptually like a function that checks the v-if condition and, if true, returns an h('ul') call whose children are generated by calling items.map(item => h('li', item.text)). The v-for does not exist as a directive object at runtime; it is just the map call. The v-if is simply the surrounding if statement or ternary that decides whether to return the ul vnode or null.