<b>Vue 3 в проде: 5 мест, где чаще всего прячутся лишние баги и тормоза</b>

<b>Vue 3 в проде: 5 мест, где чаще всего прячутся лишние баги и тормоза</b>

Vue обычно прощает многое — и это же делает его опасным для небрежной архитектуры. Когда проект растёт, проблемы чаще всего сидят не в самом фреймворке, а в том, как собраны компоненты, состояние и запросы.

— Слишком много логики в шаблоне. Если в template начинается вычисление условий, форматирование и ветвления на полэкрана, компонент быстро превращается в нечитаемый узел. Вынесите вычисления в <code>computed</code> или composable.

— Злоупотребление <code>watch</code>. Наблюдатели удобны, но их легко размножить. Если один и тот же стейт трижды запускает побочные эффекты, вы получаете гонки, дубли запросов и неожиданные перерисовки.

— Неявные зависимости между компонентами. Когда родитель «знает слишком много» о детях, а дети тянут данные через цепочку пропсов, система становится хрупкой. Для общего состояния чаще нужен Pinia или аккуратный provide/inject.

— Ключи в списках «для галочки». Неверный <code>:key</code> ломает переиспользование DOM-узлов и даёт странные визуальные артефакты. Особенно заметно в формах, таблицах и динамических списках.

— Тяжёлые компоненты без границ. Если большой экран собирает всё сразу, любой чих тянет за собой лишний JS. Разделяйте по маршрутам, лениво грузите редкие блоки, следите за размером dependency graph.

Есть наблюдение, которое стоит проверить: в Vue чаще выигрывает не тот, кто пишет «красивее», а тот, кто раньше режет лишнюю реактивность. Чем меньше скрытых связей — тем спокойнее поддержка.