BonBonSlick
@BonBonSlick
Junior Web Developer Trainee

Что и почему лучше v-if vs v-show vs computed?

<em class='  fa-2x'
                :class='this.isSending ? "fa fa-spinner fa-spin" : "fas fa-check"'
            ></em>

Можно влепить 2 елемента
<em class='  fa-2x fa fa-spinner fa-spin'
                 v-show / if ="'this.isSending"
            ></em>
            <em class='  fa-2x fa fa-spinner fa-spin'
                 v-show / if ="'!this.isSending"
            ></em>

В случае с IF VDOM будет каждый раз обновлятся, добавлен и удален старый елемент.
В случае с SHOW будет обновлен елемент, добавлен класс display
В случае с COMPUTED будет выставлен просто другой класс.
Естественно все варианты изменяют дом, но притериев отбора что использовать
1 - какая из операций наименее затратна и быстрая?
2 - в случае с крумными компонентами v-if может сильно нагружать девайс юзера, но зато первая загрузка будет быстрее как в случае с v-show,, какой подход вы используете и когда, почему?
  • Вопрос задан
  • 95 просмотров
Решения вопроса 1
Aetae
@Aetae
Тлен
В случае с IF VDOM будет каждый раз обновлятся, добавлен и удален старый елемент.

Нет. Элемент будет переиспользован, обновится толко класс. Vue умный.
В случае с SHOW будет обновлен елемент, добавлен класс display

Нет, в случае с v-show будет 2 элемента на странице, один из которых с display: none. При том все вычисления и построения dom проводиться будут, само собой, для обоих.

В случае с COMPUTED будет выставлен просто другой класс.

Да.

Использовать следует computed. Он не только обновляет лишь класс, но и кэширует его, если изменения не нужны. Но в принципе и простая тренарка особо не хуже, разница ничтожна.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы