Explain two-way data binding and provide input binding syntax

WHAT THIS TESTS: At the senior level, this question screens for framework literacy and depth of understanding, not memorization. The interviewer wants to know if you recognize that two-way binding is a convenience abstraction rather than a fundamental reactive primitive. They are checking whether you can decompose framework sugar into its constituent unidirectional parts: a value flowing down to the view and an event flowing back up to the model. It also tests whether you understand the trade-offs between developer ergonomics and explicitness in large applications.

A GOOD ANSWER COVERS: First, a crisp definition: two-way data binding means that changes in the UI automatically update the component state and changes in the component state automatically update the UI. Second, the candidate should provide the exact syntax for one framework, such as Vue v-model="username", Angular [(ngModel)]="username", or Svelte bind:value={username}. Third, and most importantly, the candidate must explain the underlying mechanism. In Vue, v-model expands to modelValue prop and update:modelValue event. In Angular, the banana-in-a-box notation [(ngModel)] combines property binding [ngModel] and event binding (ngModelChange). In Svelte, bind:value compiles to value prop and on:input listener assignments. Fourth, a senior candidate should mention when to avoid it, such as in large forms where explicit event handlers improve traceability, or in performance-sensitive lists where unnecessary reactivity causes overhead.

COMMON WRONG ANSWERS: The biggest red flag is reciting syntax without explaining the event-and-property decomposition. Another weak pattern is claiming two-way binding violates unidirectional data flow without clarifying that frameworks implement it as two separate unidirectional operations. Some candidates confuse framework-specific two-way binding with native DOM two-way properties or manual addEventListener wiring. Saying it is unique to one framework also signals shallow cross-framework knowledge.

LIKELY FOLLOW-UPS: The interviewer may ask how v-model or ngModel differs from a simple one-way binding plus a manual input handler. They might ask about change detection implications, such as Angular's Zone.js versus signals, or Vue's reactivity system. Another common pivot is form architecture: when would you use reactive forms or explicit event handlers instead of two-way binding? Expect a question about custom components implementing two-way binding through event contracts.

ONE CONCRETE EXAMPLE: Imagine a login form with username and password fields. In Vue, you write input v-model="username". Under the hood, this compiles to an input element with value bound to username and an onInput listener that sets username to event.target.value. If you later refactor this into a reusable BaseInput component, you must expose a modelValue prop and emit an update:modelValue event to preserve the two-way contract. This demonstrates that the syntax is sugar, but the contract remains explicit and unidirectional.