Пожалуй самое экзотичное что можно встретить в vue-проектах.

Паровозик из $parent.$parent.$parent (давно забытое legacy)

Как часто встречается: Редкость в Vue 3 (слава богу), но до сих пор встречается как привет из темного прошлого.

Схема: Глубоко вложенная кнопка вызывает метод прадедушки: @click="$parent.$parent.$parent.loadMainData()".

В чем боль: - Хрупкость «хрустальной вазы». Стоит дизайнеру обернуть кнопку в дополнительный <div> или добавить промежуточный компонент - цепочка рвётся, приложение падает.

- Компонент невозможно переиспользовать, он больше не является независимым компонентом. Вы не можете взять и вставить его в другое место приложения, потому что он намертво ожидает, что над ним сидят ровно три конкретных родителя с определенным методом.

- Когда вы откроете компонент самого верхнего уровня, вы с ума сойдете искать, откуда вызывается метод loadMainData. В самом родителе нет никаких упоминаний, никто не слушает события (@), никто не вызывает методы.

Как надо: Поднимать события через emit, использовать provide/inject для сквозных зависимостей или выносить общую логику в стор.

JQuery-десант в onMounted (запрещенный прием)

Как часто встречается: Фронтенд-археология в чистом виде, если вам попался такой проект - вам крупно повезло... Но только если вы любите страдания, как сенобит, для которого грань между болью и блаженством стёрта в порошок.

Схема: ``` onMounted(() => {   $('.my-vue-button').on('click', function() {     $(this).closest('.card').find('.panel').slideToggle();   }); }); ```

В чем боль: Жестокая война двух миров. Vue строит Virtual DOM и уверен, что полностью контролирует интерфейс. В это время jQuery (или прямой querySelector) приходит из засады и насильно меняет DOM в обход реактивности. Как только во Vue изменится стейт и компонент решит перерендериться, он просто сотрет все художества jQuery. Привет, дергающиеся анимации, дублирующиеся обработчики событий и утечки памяти.

Как надо: Мыслить стейтами, а не элементами. Управлять классами и видимостью через реактивные флаги (:class, v-if). А живые DOM-узлы трогать только через Template Refs (ref="myBtn") и исключительно для инициализации внешних плагинов (карт, графиков).

Есть "любимый" хак в Vue? Делитесь в комментариях!