Директива v-show в Vue
Ещё одним вариантом условного отображения
является директива v-show.
Используется очень похоже:
<template>
<p v-show="isAuth">
+++
</p>
</template>
Отличия в том, что элемент с v-show будет всегда
отрисовываться и оставаться в DOM, а переключаться
будет лишь его CSS свойство display.
Директива v-if выполняет "настоящую"
условную отрисовку, так как гарантирует,
что слушатели событий и дочерние компоненты
внутри блока должным образом уничтожаются
и воссоздаются при переключениях условия.
Директива v-if также ленивая: если условие
ложно на момент первоначальной отрисовки,
то она ничего не сделает - условный блок
не будет отрисован до тех пор,
пока условие не станет истинным.
Для сравнения, v-show намного проще - элемент
всегда отрисовывается, вне зависимости от
исходного состояния с переключением на основе CSS.
В целом, у v-if выше затраты на переключение,
в то время как v-show имеет больше затрат
на первичную отрисовку. Так что используйте v-show,
если переключения будут частыми,
и предпочитайте v-if, если условие
может и не измениться во время исполнения.
Директиву v-show нельзя использовать на элементе
template и она не работает с v-else.
Дан абзац и кнопка. Сделайте так, чтобы абзац тогглился по нажатию на кнопку.
Расскажите, в чем отличия директив
v-show и v-if.
Расскажите, когда лучше использовать
директиву v-show, а когда - v-if.
Расскажите, какие ограничения
имеет директива v-show.