In Vue 3, when a v-if/v-else pair renders an <input> in each branch, does typed text survive switching branches, and why?

## The chain and its rules A conditional chain is a `v-if` followed by any number of `v-else-if` siblings and at most one `v-else`: ```vue-html <p v-if="status === 'loading'">Loading…</p> <p v-else-if="status === 'error'">Failed</p> <template v-else> <h2>{{ title }}</h2> <p>{{ body }}</p> </template> ``` The compiler checks a few rules: - **Adjacency**: a `v-else-if` or `v-else` must come right after a `v-if` or `v-else-if` sibling. Whitespace and comments in between are tolerated; another element is not, and the compiler reports `v-else/v-else-if has no adjacent v-if or v-else-if.` - **`<template>` branches**: any branch may be a `<template>` so it can switch a group of elements without adding a wrapper to the DOM. - **At most one branch renders.** When none matches and there is no `v-else`, a comment placeholder stands in its place. ## Branch identity: auto-generated keys When the condition flips, Vue compares the vnode it rendered last time with the one it renders now. Two vnodes are treated as the same node only if their **type and key** match. Vue 3's compiler assigns each branch of a chain a **distinct key** automatically, based on its position in the chain, unless you wrote one yourself. The practical effect is visible with two inputs: ```vue-html <input v-if="loginType === 'email'" placeholder="Email" /> <input v-else placeholder="Username" /> ``` Type something, toggle `loginType`, and the field is **empty**: the email input was unmounted and a separate username input was mounted. Nothing is shared between branches. ## What Vue 2 did differently | | Vue 2 | Vue 3 | |---|---|---| | Same tag in two branches, no keys | element **reused**, patched in place | separate nodes, remounted | | Typed value after switching | carried over | discarded | | Keys on branches | needed to force separation | optional | | Same key on two branches | forced reuse | compile error | In Vue 2 the common advice was to add `key="email"` and `key="username"` to stop the value leaking. In Vue 3 those keys are unnecessary. If you keep manual keys, they must be different; the compiler rejects duplicates with `v-if/else branches must use unique keys.` ## If you want the value to persist Sometimes carrying the value over is the desired behaviour, for instance when only the placeholder should change. Vue 3 no longer offers the shared-key trick, so make persistence explicit: 1. Render **one** input and bind the differing attributes: `:placeholder="loginType === 'email' ? 'Email' : 'Username'"`. 2. Or keep the value in component state with `v-model`, so each newly mounted input starts from the stored value. ## Interview angles - "Why is my field empty after switching tabs?" The branches are separate nodes, so their DOM state does not carry over. - "Do I still need `key` on `v-if` branches?" No; if you add them, they must be unique. - "Can `v-else` follow a `v-show`?" No: `v-else` pairs only with `v-if` and `v-else-if`. - "Why won't my `v-else` compile?" Usually another element sits between it and the `v-if`.