В чём разница между v-if и v-show во Vue?

Question

v-if условно добавляет или удаляет элемент из DOM, а v-show лишь управляет его видимостью через CSS. При v-if компонент создаётся и уничтожается заново. v-show всегда оставляет элемент в DOM, меняя свойство display. Это влияет на производительность и поведение компонента. Выбор директивы зависит от сценария использования.

YeaHub · Accepted Answer

Во Vue существуют две основные директивы для условного отображения элементов — v-if и v-show. Они решают одну задачу, но работают по-разному.Принцип работы v-ifv-if управляет существованием элемента в DOM.Элемент создаётся только при выполнении условияПри смене условия элемент удаляетсяХуки жизненного цикла вызываются при каждом создании и уничтоженииПример:

Контент

Принцип работы v-showv-show управляет только отображением.Элемент всегда присутствует в DOMМеняется CSS-свойство displayКомпонент создаётся один разПример:

Контент

Ключевые различияРабота с DOMv-if добавляет и удаляет узлыv-show скрывает и показывает узлыПроизводительностьv-if дороже при частых переключенияхv-show дороже при начальной загрузкеЖизненный циклv-if повторно запускает хукиv-show не влияет на жизненный циклВыводv-if подходит для редко меняющихся условий, а v-show — для частого переключения видимости, когда важно сохранить компонент в DOM.