Совет по JavaScript

Используй String.raw с шаблонными литералами, чтобы выводить необработанные строки — экранирование при этом игнорируется.

👉 Гайды по JavaScript | дать буст

Знаешь, как Vue обновляет DOM?

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

Вместо этого:

1️⃣Группирует несколько изменений данных в один апдейт
2️⃣Кладёт эти апдейты в асинхронную очередь
3️⃣Обрабатывает очередь на следующем «тике» event loop

Такое батчирование предотвращает лишние операции с DOM и повышает производительность.

👉 Гайды по JavaScript | дать буст

Шаблонные литералы + условные типы = TypeScript на уровень выше

👉 Гайды по JavaScript | дать буст

Options API vs Composition API

✅ Options API — отлично подходит для небольших проектов или команд, которым важна быстрая настройка и понятная, структурированная организация кода.
✅ Composition API — лучше всего работает в крупных и сложных приложениях, где критична модульность, переиспользуемая логика и масштабируемость в долгосрочной перспективе.
✅ Смешанное использование — можно спокойно совмещать оба подхода в одном проекте, особенно если ты в процессе миграции или добавляешь новые фичи, где гибкость Composition API будет в плюс.

А ты какой подход используешь в своих проектах?

👉 Гайды по JavaScript | дать буст

Cтранная штука во vuejs о которой стрёмно рассказывать

Я подгружаю ТОННЫ данных при первом запуске приложения. Я одержим тем, чтобы UI реагировал мгновенно, и предпочту загрузить 1000 записей на старте, чем заставлять пользователя ждать.

Для этого использую composable useCachedData

👉 Гайды по JavaScript | дать буст

Реализация real-time функциональности во Vue

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

1️⃣Обновления в реальном времени с Supabase
Используйте возможности Supabase для real-time синхронизации данных между всеми клиентами.
https://supabase.com/docs/guides/realtime

2️⃣WebSocket и Server-Sent Events (SSE)
Эти технологии позволяют реализовать комментарии в реальном времени, уведомления и другие интерактивные компоненты.

👉 Гайды по JavaScript | дать буст

Знаешь, когда стоит использовать Vue.nextTick?

nextTick нужен в следующих случаях:

✅Когда нужно обратиться к обновлённым DOM-элементам сразу после изменения данных
✅Когда ты выполняешь операции, зависящие от нового состояния DOM
✅Когда нужно измерить размеры элемента после обновления (например, clientWidth, clientHeight)
✅Когда используешь сторонние библиотеки, которые напрямую работают с DOM (например, Chart.js)

👉 Гайды по JavaScript | дать буст

Zod с .refine() = валидационные правила без лишней возни.

👉 Гайды по JavaScript | дать буст

Если ты хочешь собрать надёжное веб-приложение, то традиционно тебе пришлось бы заморачиваться с кучей инфраструктуры.

Но с serverless-архитектурой можно просто сосредоточиться на коде приложения.

В этом гайде POnukwili объясняет, как работает serverless, и показывает на практике, как опубликовать Docker-образ на Node.js в AWS ECR и задеплоить контейнер в AWS Lambda.

https://freecodecamp.org/news/serverless-architecture-with-aws-lambda/

👉 Гайды по JavaScript | дать буст

Как использовать паттерн "разветвлённого компонента"

Выноси сложную условную отрисовку в отдельные компоненты.
Вместо множества v-if внутри одного компонента — создай отдельный компонент для каждого состояния.

Такой подход делает код читаемее и проще в поддержке со временем.

👉 Гайды по JavaScript | дать буст

Совет дня:

В @nuxt_js есть множество способов задать текущий layout

👉 Гайды по JavaScript | дать буст

Возможно, состояние (state) тебе вообще не нужно

👉 Гайды по JavaScript | дать буст

"Как можно сократить префетчинг (чтобы оптимизировать расходы на хостинг),
не сильно теряя в скорости навигации в Next?"

Попробуй префетчинг по ховеру (prefetching on hover)

👉 Гайды по JavaScript | дать буст

Что вы знаете о паттерне проектирования «Slots и Template Props»?

Если у вас есть пропс, который напрямую передаётся в шаблон, это хороший знак, что вместо него стоит использовать слот. Почему? Они выполняют схожую функцию, но слот даёт больше гибкости.

👉 Гайды по JavaScript | дать буст

Поговорим о фрагментации в Options API и связности в Composition API

✅Фрагментация в Options API
По мере роста компонента Vue.js по размеру или сложности, разработчики сталкиваются с тем, что логика расползается по разным секциям.
Например, при обновлении нескольких реактивных состояний или связанных вычислений, разрозненная структура Options API затрудняет поддержку читаемости и целостности кода.

✅Связность в Composition API
Composition API побуждает инкапсулировать связанную логику в едином, цельном виде.
С помощью composition-функций можно группировать данные и методы, которые взаимодействуют друг с другом.
Это улучшает читаемость и упрощает ментальную модель взаимодействия разных частей компонента.

👉 Гайды по JavaScript | дать буст

Composition API: Эффективная структура

Composition API предлагает упрощённый подход к архитектуре компонентов, акцентируя внимание на логической группировке функциональности и детализированных импортах.

Такая структура не только улучшает реактивность, но и минимизирует использование памяти за счёт устранения накладных расходов на прокси экземпляра. Код, написанный с использованием Composition API, позволяет доступ к переменным в области видимости, обходя прокси и обеспечивая прямой, оптимизированный доступ к реактивным свойствам.

Этот подход с инлайновыми, компилируемыми функциями приводит к меньшим и более эффективным бандлам и улучшает минификацию, поскольку имена переменных можно безопасно укорачивать по всему коду.

На изображении вы можете увидеть пример Tree-shaking.

👉 Гайды по JavaScript | дать буст

С nuxt_js компоненты обычно уничтожаются и пересоздаются при переходе между страницами, из-за чего их состояние сбрасывается. Установив свойство keepalive у компонента NuxtPage, Nuxt обернёт ваши страницы в Vue-компонент <KeepAlive>, сохраняя их состояние при навигации.

👉 Гайды по JavaScript | дать буст

Фишка в TypeScript: оператор satisfies предотвращает "тихие" ошибки.

Он позволяет ловить опечатки уже на этапе компиляции.

👉 Гайды по JavaScript | дать буст