SFCs and the compiler model

Mental model

Understand how Vue compiles templates into render functions, how Single-File Components colocate concerns without mixing responsibilities, and how createApp, plugins, and application mounting establish the runtime boundary. Prefer declarative templates, stable keys, and semantic HTML while recognizing when render functions are justified.

Production practice

Decompose a product interface into focused SFCs with stable list identity. Evaluate ownership, runtime validation, failure states, accessibility, server trust, and measurable performance before choosing an abstraction.

Common failure modes

Watch for accidental shared state, stale asynchronous results, hidden mutation, hydration mismatch, inaccessible feedback, over-broad caching, and client checks mistaken for security. Keep boundaries explicit and test the observable contract.

Takeaways

• Choose APIs from data ownership and lifecycle.
• Validate untrusted values at the trusted boundary.
• Preserve semantics and recovery paths.
• Measure before optimizing.