Как правильно разрушить и инициализировать Swiper?

Question

[Big Wheel]

codesandbox.io/s/broken-thunder-8qnw57

Хочу разрушить карусель на разрешении меньше 800px и инициализировать на разрешении больше 800px.

Получается ее выключить и включить, но мне нужно её полностью уничтожить и снова инициализировать.
`.destroy()` и `.init()` не работают. Помогите разобраться в чем проблема?

Answer 1

[Aetae]

Как и с любым иным компонентом vue - не через залезание руками в api\dom.
Просто делаете v-if="showSwiper" и переключаете, соответственно, this.showSwiper. Если v-if="false" компонент будет разрушен и всё.

// Нормальные компоненты производят всю необходимую очистку внутри себя сами по автоматическому хуку destroy, и вам не надо не о чём заботиться. Иногда конечно встречается кривое г-но с текущей памятью, но в таких случях проще самому написать компонент с нуля.

P,S. Никогда не используйте в одном компоненте одновременно setup и methods, вообще никогда. Либо одно либо другое. Это разная парадигма.

Comments

[Big Wheel]

Aetae
v-if немного не то. У меня нет задачи скрыть/показать карусель. Задача именно уничтожить экземпляр, удалить стили, контейнеры. Сам контент должен остаться.

P,S. Никогда не используйте в одном компоненте одновременно setup и methods, вообще никогда. Либо одно либо другое. Это разная парадигма.

Спасибо! Почитаю, разберусь.

[Aetae]

Big Wheel, так а что должно остаться вместо слайдера? Какие-то куски dom которые вы привыкли, что остаются при работе напрямую? Вы не должны работать с vue на таком низком уровне.

v-if swiper v-else template > нужная структура по умолчанию руками

Вы не знаете и не должны знать, что происходит внутри компонента при его использовании: ни какие там классы, ни какая там dom-структура.
Компонент - это атомарная единица, чёрный ящик, который гарантирует только то, что предоставляет в своём api, под капотом же меняться может что угодно от версии к версии.

Если нужное вам поведение может быть стандартизировано, то у компонента должен быть prop условно "inactive" который гарантирует внешний вид и поведение в отключённом состоянии.

[Big Wheel]

Aetae, по моей неопытной задумке - эти куски DOM подхватывает другой плагин и работает с ними.

Хм. То есть, хорошей практикой будет сделать два компонента с одинаковым контентом, но разным поведением и скрывать один и показывать другой?

[Aetae]

Big Wheel,

Хм. То есть, хорошей практикой будет сделать два компонента с одинаковым контентом, но разным поведением и скрывать один и показывать другой?

Да. Точнее сделать свой компонент, который в слоты принимает этот "одинаковый контент" и раскладывает уже как надо в двух вариантах в зависимости от какого-то свойства.)

Однако если таки очень хочется, то судя по документации можно попробовать swiper.destroy(false, true), что не удалит инстанс при разрушении, и потому, в теории, ничего не сломает, однако это уже всё на ваш страх и риск.

[Big Wheel]

Aetae, `swiper.destroy(false, true)` пробовал, куча головняков вылезает / : Плюс ещё новая версия вышла (10.0.0), где то может быть нестабильна.

Как обычно лёгкий путь нам хорошим не кажется )

Большое спасибо за объяснение и за то, что потратили столько времени.