Vue.js の v-if と v-show で、条件が偽になったときの要素の扱いの違いを正しく説明しているものはどれですか。

解説

正解は「v-if は要素を DOM から取り除き、v-show は CSS の display: none で非表示にします」です。v-if は条件に応じて要素を作ったり破棄したりし、v-show は要素を常に残したまま見た目だけ切り替えます。DOM 上での違い<p v-if="flag">A</p> <!-- flag が false の間、この要素は DOM に存在しません --> <p v-show="flag">B</p> <!-- DOM には残り、style="display: none;" が付くだけです -->このため切り替えのコストに差が出ます。v-if は切り替えのたびに要素の生成と破棄が走り、v-show は最初に必ず描画される代わりに切り替えは軽量です。頻繁に開閉するタブやメニューには v-show、条件がめったに変わらない表示には v-if が向いています。他の説明が誤りである理由「v-show は要素を DOM から取り除き」は、両者の動作をちょうど逆にした説明です。「v-if は初回の描画時に一度だけ」は誤りで、v-if もリアクティブ（データの変化を自動で追跡すること）に再評価されます。一度だけ描画したい場合は v-once という別のディレクティブを使います。「v-show は v-else と組み合わせられますが」も逆です。v-else や v-else-if と組み合わせられるのは v-if だけです。また v-show は <template> 要素には使えません。v-if で隠すと入力途中の値が消えますv-if が偽になると、その中の子コンポーネントはアンマウント（破棄）され、内部で保持していた状態も失われます。たとえばモーダル内のフォームを v-if で閉じると、再度開いたときに入力途中の内容がリセットされます。状態を保持したいなら v-show を使うか、値を親コンポーネントやストアに持たせる必要があります。逆に「開くたびに初期化したい」場合は v-if の性質が役立ちます。参考条件付きレンダリング | Vue.js