Vue. Условная отрисовка. v-if vs v-show

V-IF

Директива v-if используется для рендеринга блока по условию. Блок будет отображаться только в том случае, если выражение директивы возвращает значение, приводимое к true. Это значит, что пустой массив, объект, непустая текстовая строка — всё это будет преобразовано к true.

При рендеринге компонента все элементы с v-if="false" будут проигнорированы и в DOM не попадут.

v-if можно добавлять на теге <template>. Таким образом, условие будет применено ко всем элементам внутри без необходимости создания дополнительного обёрточного элемента. <template> служит невидимой обёрткой и сам в результатах отрисовки не появляется.

V-ELSE

Директива v-else должна идти сразу после элемента с v-if или v-else-if, иначе он не будет распознан.

V-ELSE-IF

v-else-if служит в качестве блока else if для директивы v-if. Можно объединять эти директивы в длинные цепочки.

v-else-if должен следовать сразу за элементом с v-if

УПРАВЛЕНИЕ ПОВТОРНЫМ ИСПОЛЬЗОВАНИЕМ ЭЛЕМЕНТОВ ПРИ ПОМОЩИ KEY

По умолчанию Vue старается переиспользовать DOM-элементы вместо того, чтобы создавать их заново. Это значит, что по возможности v-if, v-else-if, v-else будет использовать один и тот же элемент для отображения данных по текущему условию.

Иногда такое поведение нежелательно, и мы хотим иметь независимые элементы без переиспользования. Для этого элементу нужно дать уникальный ключ key.

V-SHOW

v-show, как и v-if, создан для условной отрисовки элементов. Но в отличие от v-if, элемент всегда присутствует в DOM-дереве. Только когда он скрыт, ему добавляется стиль display: none;. v-show имеет более высокую начальную стоимость загрузки, но переключение обходится очень дешёво.

Важно: v-show не работает на элементе <template> и не работает с v-else.

СРАВНЕНИЕ V-IF И V-SHOW

v-if:

• Производит «настоящую» условную отрисовку, удостоверяясь, что подписчики событий и дочерние компоненты внутри блока должным образом уничтожаются и воссоздаются при изменении истинности управляющего условия.
• Ленивый: если условие ложно на момент первоначальной отрисовки, он не произведёт никаких действий — условный блок не будет отображён, пока условие не станет истинным.

v-show:

• Элемент всегда присутствует в DOM, и только CSS-свойство переключается в зависимости от условия.
• Элемент будет отрисован сразу, и если условие ложно — скрыт с помощью display: none;.

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

В целом, у v-if выше затраты на переключения, а у v-show больше затрат на первичную отрисовку. Так что, если вы предполагаете, что переключения будут частыми, используйте v-show, если же редкими или маловероятными — v-if.