Вопросы на собеседовании: Vue-разработчик
100 реальных вопросов с образцовыми ответами и пояснениями для уровня Senior Vue-разработчик.
Смотреть пример резюме: Vue-разработчик →Тренировка флешкарточками
Интервальное повторение · Hunter Pass
Вопросы
Vue 3.5 изменила внутренний учёт зависимостей, но не контракт приложения: реактивные чтения отслеживаются, записи инвалидируют подписчиков, а запланированные эффекты запускаются снова.
- Связи между зависимостями и подписчиками используют двусвязные списки с версиями, что удешевляет очистку и повторное использование подписок.
- Глобальная версия позволяет computed быстро пропустить проверку, если после последнего вычисления не было реактивных изменений.
- Proxy по-прежнему перехватывают операции с объектами и коллекциями, а ref выполняют аналогичное отслеживание через value.
- Я использую эти детали при профилировании и поиске устаревших обновлений, но не связываю продуктовый код с приватными полями Dep или effect.
Зачем это спрашивают: Интервьюер проверяет знание переработанной реактивности Vue 3.5 без смешения приватной реализации с публичным API.
По умолчанию я беру ref для заменяемых значений, а reactive для цельного объекта, который остаётся за одним стабильным proxy.
- Примитив, nullable-ссылка на DOM или полностью заменяемый результат запроса подходят для ref, потому что присваивание value явно и реактивно.
- Форма с множеством изменяемых полей подходит для reactive, но замена локальной переменной с proxy не обновит потребителей старого proxy.
- Деструктуризация свойства reactive в обычную переменную разрывает живую связь, поэтому на такой границе я использую toRef, toRefs или getter.
- В переиспользуемых composable я принимаю ref или getter и нормализую их через toValue, а не навязываю вызывающему коду один контейнер.
Зачем это спрашивают: Сильный ответ связывает выбор ref и reactive с заменой значения, деструктуризацией и проектированием API composable, а не считает их взаимозаменяемым синтаксисом.
Vue хранит зависимости по исходному объекту и ключу операции, поэтому выражение подписывается на каждое прочитанное реактивное свойство вдоль пути.
- Концептуально WeakMap сопоставляет каждому исходному объекту Map, где ключи ведут к наборам зависимых активных эффектов.
- Чтение state.user отслеживает объект state с ключом user, затем чтение name отслеживает вложенный объект user с ключом name.
- Замена state.user перезапускает эффект через первую зависимость, изменение user.name через вторую, а изменение другого поля user эффект не перезапускает.
- Для итерации есть специальные зависимости, поэтому добавление или удаление ключей может повторно запустить Object.keys, for...in, перебор ключей Map или потребителей длины массива.
Зачем это спрашивают: Интервьюер проверяет, может ли кандидат вывести из конкретного чтения точные зависимости по объекту и ключу, которые инвалидирует Vue.
Vue ставит большинство реактивных задач в одну микрозадачу, удаляет дубликаты и выполняет их в стабильном порядке вместо рендера после каждой записи.
- Задачи родительского компонента выполняются раньше дочерних, чтобы не обновлять ребёнка, которого родитель уже удалил.
- Обычный watcher с режимом pre выполняется после обновления родителя, но до изменения собственного DOM, поэтому его callback не должен читать итоговый DOM владельца.
- Я использую flush: 'post' для измерения DOM после обновления Vue, а nextTick, когда императивному коду нужно лишь дождаться текущего цикла обновления.
- Я оставляю flush: 'sync' для маленьких инвариантов, потому что он обходит batching и может сработать на каждое изменение массива или итерацию цикла.
Зачем это спрашивают: Сильный ответ различает порядок очереди, фазы pre и post, nextTick и цену синхронных watchers для производительности.
Computed кэширует результат и инвалидирует кэш при изменении отслеживаемого источника, но повторно запускает getter только при чтении value.
- Первое чтение выполняет getter в контексте подписчика computed и записывает только зависимости, затронутые активной веткой.
- Запись в источник обновляет версии зависимостей и помечает computed как dirty, отделяя инвалидацию от повторного вычисления.
- При следующем чтении Vue может быстро выйти по глобальной версии или проверить версии зависимостей перед повторным запуском getter.
- Getter должен оставаться чистым, потому что побочные эффекты внутри ленивого кэшируемого вычисления получают неожиданное время запуска и очистки.
Зачем это спрашивают: Интервьюер проверяет, разделяет ли кандидат инвалидацию зависимостей, ленивый повторный расчёт, кэширование и чистоту getter.
Я использую watch, когда источник и контракт callback должны быть явными, а watchEffect, когда одна синхронная функция может сама обнаружить свои реактивные чтения.
- watch по умолчанию ленивый и передаёт новое и старое значения, а watchEffect запускается сразу и отслеживает только чтения до первого await.
- Для запроса я создаю AbortController на каждый запуск и вызываю abort перед повторным запуском или остановкой watcher.
- Во Vue 3.5 onWatcherCleanup регистрирует такую очистку при инвалидации, но его нужно вызвать во время синхронного выполнения watcher, а не после await.
- Аргумент onCleanup в callback остаётся привязанным к watcher и подходит, когда очистку нужно зарегистрировать после асинхронного кода.
Зачем это спрашивают: Сильный ответ охватывает контроль источника, отслеживание зависимостей в async-коде, отмену устаревших запросов и синхронное ограничение onWatcherCleanup.
Я создаю effectScope, когда нескольким watchers и computed нужен общий владелец вне жизненного цикла, который уже даёт setup компонента.
- Эффекты, синхронно созданные внутри scope.run, захватываются областью, а scope.stop освобождает их вместе.
- Вложенные области останавливаются с родителем, а effectScope(true) отсоединён и поэтому требует явного долгоживущего владельца.
- Composable использует onScopeDispose для таймеров, подписок и внешних ресурсов, связанных с текущей областью.
- Эффекты, созданные позже в асинхронном callback, могут не попасть в активную область, поэтому я создаю их синхронно или сохраняю и вызываю их stop-функции.
Зачем это спрашивают: Интервьюер проверяет, умеет ли кандидат явно задавать владение watchers и ресурсами, особенно вне setup компонента.
Я использую shallowRef, когда Vue должна реагировать на замену верхнеуровневого значения, но не должна проксировать и отслеживать вложенный граф объектов.
- Он подходит для большого неизменяемого снимка, внешнего объекта состояния или экземпляра редактора с собственным жизненным циклом.
- Замена snapshot.value уведомляет потребителей, а изменение snapshot.value.items на месте не уведомляет.
- Если интеграция обязана менять объект на месте, triggerRef явно уведомляет потребителей после изменения.
- Ручной trigger ослабляет обычные гарантии потока данных, поэтому я прячу его в узком адаптере и предпочитаю замену для состояния приложения.
Зачем это спрашивают: Сильный ответ рассматривает shallowRef как осознанную границу реактивности, а triggerRef как контролируемый обходной путь, а не общую оптимизацию.
Оба API пересекают границу proxy, поэтому я применяю их узко и не позволяю исходной и проксированной версиям стать конкурирующими идентичностями в доменном состоянии.
- markRaw запрещает проксировать отмеченный корневой объект, что подходит для экземпляра класса или внешнего виджета под управлением другой библиотеки.
- Его вложенные объекты не получают автоматической защиты при вставке в другое место, поэтому raw.nested и проксированное вложенное значение могут не пройти строгое сравнение.
- toRaw возвращает исходный объект для временной интеграции или проверки, но чтение и запись через него обходят обычное отслеживание и запуск зависимостей.
- Для ключей Map, кэшей и сравнений я нормализую данные до одного представления или использую стабильный доменный ID вместо идентичности объекта.
Зачем это спрашивают: Интервьюер проверяет понимание неглубокого отключения proxy, обхода отслеживания и рисков идентичности исходных и проксированных объектов.
Стабильные keys сохраняют идентичность vnode при изменениях списка, а подсказки компилятора позволяют runtime проверять только действительно изменяемые части.
- Keyed diff сначала синхронизирует совпадающие начало и конец, затем строит соответствие оставшихся новых keys для поиска переиспользуемых старых узлов.
- Он удаляет пропавшие узлы, добавляет новые и использует наибольшую возрастающую подпоследовательность, чтобы сократить перемещения сохранённых DOM-узлов.
- Уникальные доменные ID подходят для keys, а индексы массива опасны, если вставка, удаление или сортировка должны сохранять состояние компонентов.
- Флаги обновления отмечают динамические текст, class, style, props и фрагменты с ключами, а массивы dynamicChildren у блоков позволяют Vue пропускать статических потомков.
Зачем это спрашивают: Сильный ответ связывает корректность keys, алгоритм keyed diff, сокращение перемещений DOM и быстрые пути, созданные компилятором.
Область, которая запускает реактивный эффект или внешний ресурс, должна отвечать за его очистку, если только ресурс не используется совместно намеренно.
- Watchers, обработчики сокета, таймеры и запросы, созданные при отдельном вызове, должны регистрировать очистку через onScopeDispose, включая отмену незавершённой работы.
- Общему сокету нужен владелец на уровне сервиса с подсчётом подписчиков или явной операцией dispose, чтобы один компонент не мог закрыть его для всех.
- Отсоединённый effectScope должен предоставлять функцию stop, за которую отвечает граница приложения или запроса, а тест с повторными монтированиями и размонтированиями должен подтверждать, что число обработчиков и задач возвращается к исходному уровню.
Зачем это спрашивают: Интервьюер проверяет, умеет ли кандидат задавать конкретные сроки жизни эффектов composable, а не полагается на то, что размонтирование компонента всегда очистит всё.
Я бы предоставил единый типизированный контракт контекста, а его изменяемую реализацию оставил внутри провайдера.
- Экспортируйте уникальный symbol с типом InjectionKey<ValidationContext>, чтобы provide и inject согласовывали состояние, команды и возвращаемые типы без коллизий строковых ключей.
- Предоставляйте реактивное состояние только для чтения вместе с операциями вроде validateField, а обязательные потребители должны сразу выдавать ошибку, если inject вернул undefined.
- Используйте значение по умолчанию только тогда, когда автономная работа действительно допустима, и создавайте отдельный сервис для каждого приложения или SSR-запроса, если он содержит изменяемое пользовательское состояние.
Зачем это спрашивают: Интервьюер оценивает безопасность типов, границы изменений, поведение при отсутствии провайдера и изоляцию запросов при внедрении зависимостей.
Я бы оставил родителя источником истины, а через defineModel выразил prop и событие обновления как один типизированный ref.
- const page = defineModel<number>('page', { required: true }) компилируется в prop page и событие update:page, поэтому присваивание page.value запрашивает обновление у родителя.
- Родитель использует v-model:page, а временные детали вроде фокуса и наведения остаются локальными, поскольку им не нужна внешняя координация.
- Отдельные модели page и pageSize понятнее зеркальных локальных копий, но их значения по умолчанию, момент обновления и валидация всё равно входят в публичный контракт.
Зачем это спрашивают: Интервьюер проверяет, упрощает ли defineModel управляемый контракт, не скрывая владельца состояния и не создавая дублирующее состояние.
Считывайте модификаторы модели в преобразователе set и отправляйте одно нормализованное значение, сохраняя синхронизацию родителя и дочернего компонента.
- Деструктурируйте const [model, modifiers] = defineModel<string>(), а в set проверяйте modifiers.trim или modifiers.capitalize перед возвратом значения, которое будет отправлено родителю.
- Преобразователь не должен менять тип и должен быть идемпотентным, а ошибки валидации следует показывать явно, а не скрывать за преобразованием некорректных значений предметной области.
- Значение по умолчанию в дочернем компоненте может инициализировать model, пока связанный ref родителя остаётся undefined, поэтому инициализируйте родителя, сделайте model обязательной или не задавайте значение по умолчанию в дочернем компоненте.
Зачем это спрашивают: Интервьюер проверяет знание преобразований с учётом модификаторов и документированного случая рассинхронизации из-за значения по умолчанию в defineModel.
Во Vue 3.5 переменные, полученные деструктуризацией defineProps, реактивны, но библиотеке с поддержкой нескольких версий нельзя полагаться на это поведение, не повысив минимальную версию Vue.
- Во Vue 3.5 компилятор script setup переписывает чтение деструктурированного prop в обращение к соответствующему свойству props, а синтаксис деструктуризации JavaScript позволяет задавать значения по умолчанию.
- Watcher или composable должен получить () => foo либо toRef на основе getter, потому что прямая передача foo передаёт текущее значение, а не реактивный источник.
- Преобразование применяется только к деструктуризации defineProps в том же блоке script setup. Обычная деструктуризация реактивного объекта по-прежнему может разорвать связь со свойством.
- Для совместимости с Vue 3.4 сохраняйте объект props и читайте props.foo либо создавайте явный toRef вместо зависимости от преобразования Vue 3.5.
Зачем это спрашивают: Интервьюер оценивает осознанное использование реактивности компилятора с учётом версии и правильную передачу реактивных источников в watchers и composables.
Я бы перевёл код на явные контракты ref и computed, а не сохранял неявное переписывание присваиваний.
- Reactivity Transform удалили из ядра Vue в версии 3.4, поэтому код в script должен использовать ref, computed и .value, а шаблоны по-прежнему автоматически разворачивают ref верхнего уровня.
- Используйте toRef или toRefs, когда после деструктуризации нужно сохранить связь со свойством, и явно передавайте ref или getter в composables.
- Vue Macros может вернуть этот синтаксис как подключаемое преобразование при сборке, но оно усложняет инструменты и создаёт дополнительные требования для пользователей библиотеки, которых можно избежать с явными ref.
Зачем это спрашивают: Интервьюер проверяет, понимает ли кандидат причины удаления преобразования, умеет ли безопасно перенести его семантику и учитывает ли цену нестандартного синтаксиса времени компиляции.
Используйте generic в SFC, когда одна связь типов охватывает props, emits и slots, а поведение во время выполнения одинаково для всех типов элементов.
- Объявите generic="T extends { id: string }" в script setup, типизируйте rows как T[], событие выбора как T, а item: T предоставьте через типизированный слот строки.
- Оставляйте публичный API небольшим и осмысленным, публикуйте декларации типов и запускайте vue-tsc на тестовых проектах пользователей библиотеки, чтобы находить ошибки вывода типов до релиза.
- Для template ref обобщённого компонента используйте ComponentExposed вместо InstanceType, а сетевые данные проверяйте во время выполнения, поскольку TypeScript не валидирует полученные данные.
Зачем это спрашивают: Интервьюер проверяет, сохраняют ли generic-типы SFC вывод типов у пользователей библиотеки, не раскрывая детали реализации и не подменяя проверку данных во время выполнения.
Выбирайте абстракцию по тому, кто должен отвечать за поведение, рендеринг, жизненный цикл и гарантии доступности.
- Используйте composable, когда потребители могут безопасно управлять всей разметкой и им нужно лишь переиспользуемое состояние выбора, фильтрации или управления с клавиатуры без дополнительной границы компонента.
- Используйте headless-компонент со slots с контекстом, когда один владелец должен координировать фокус, связи ARIA, контекст provide и inject и жизненный цикл, а потребители создают разметку на основе состояния только для чтения и доступных действий.
- Используйте обычные slots, когда семантическая структура компонента фиксирована, а потребители только вставляют содержимое. Гибкость slots не должна позволять убрать обязательные подписи, роли или связи.
Зачем это спрашивают: Интервьюер оценивает, следует ли выбор способа переиспользования конкретным требованиям к владению и доступности, а не стилистическим предпочтениям.
Я бы сопоставил каждую границу с той частью дашборда, где содержимое или заглушка должны появляться как единый видимый пользователю блок.
- Используйте defineAsyncComponent для разделения кода и локального управления загрузкой, тайм-аутом, повтором или ошибкой, когда эта зависимость не находится под управлением родительского Suspense.
- Suspense координирует async setup и приостанавливаемые асинхронные компоненты в общих ветках default и fallback. Независимым виджетам нужны вложенные границы, чтобы один медленный запрос не скрывал весь дашборд.
- Под Suspense параметры загрузки, ошибки, задержки и тайм-аута асинхронного компонента игнорируются, если suspensible не равен false, а для ошибок всё равно нужны onErrorCaptured или отдельная граница ошибок с возможностью повторить операцию.
Зачем это спрашивают: Интервьюер проверяет, разделяет ли кандидат загрузку кода, готовность данных, область действия заглушки и обработку ошибок как самостоятельные задачи.
Кэшируйте только те представления, восстанавливаемое локальное состояние которых действительно стоит сохранять, и задайте измеренный верхний предел числа сохранённых экземпляров компонентов.
- Используйте include, exclude и max со стабильными именами и ключами компонентов. При превышении max KeepAlive вытесняет экземпляр, который использовался дольше всего назад, и размонтирует его.
- Приостанавливайте сокеты, наблюдатели, таймеры и тяжёлые сторонние виджеты в onDeactivated, восстанавливайте их в onActivated, а окончательную очистку выполняйте в onUnmounted.
- Переносите долговечные фильтры или черновики в Pinia либо состояние маршрута, если хранить весь DOM и граф компонентов дороже, чем заново создать представление.
Зачем это спрашивают: Интервьюер оценивает, рассматривает ли кандидат KeepAlive как ограниченную политику сохранения состояния с управлением ресурсами при деактивации.
Закрытые вопросы
- 21
В маркетплейсе на Nuxt 3 есть флаг модального окна, доступный по ссылке фильтр из 12 категорий, товары с пагинацией из API и незавершённый черновик оформления заказа. Где должен жить каждый вид состояния?
nuxtapi - 22
В административном приложении на Vue 3 есть один Pinia store на 2000 строк для клиентов, счетов, прав доступа и UI-диалогов. Как провести границы store, не создав десятки мелких store?
state-managementvue - 23
Setup store Pinia отдаёт данные корзины во время SSR Nuxt. Что должно быть изолировано на уровне запроса, возвращено из store и гидрировано на клиенте?
ssrcomposition-apistate-management - 24
Компонент делает деструктуризацию const { total, addItem } = useCartStore(), и total перестаёт обновляться после первого рендера. Как это исправить и что можно деструктурировать обычным способом?
componentsdestructuring - 25
Таблица данных Vue умеет искать среди 100 000 клиентов и раз в секунду обновляет одну строку через WebSocket. Как вы построите состояние Pinia?
gridstate-managementvue - 26
Store A читает Store B во время setup, Store B читает Store A во время setup, а SSR теперь падает в зависимости от порядка импортов. Как убрать цикл?
ssrcomposition-api - 27
Действие автодополнения в Pinia отправляет запрос через 250 мс, но медленный ответ для 'vue' перезаписывает более новый результат для 'vue 3'. Как учитывать только последний запрос?
state-managementvue - 28
Две вкладки браузера редактируют один счёт версии 17, а UI оптимистично меняет его статус. Как действие Pinia должно обработать откат и конфликт устаревшей записи?
state-managementlockingrollback - 29
В SSR-приложении нужны плагины Pinia для сохранения черновиков и телеметрии actions в 15 store. Что эти плагины должны делать и чего избегать?
ssrstate-management - 30
Как вы протестируете setup store Pinia, который гидрирует корзину из 20 товаров через Nuxt SSR, а затем выполняет actions на клиенте?
ssrcomposition-apistate-management - 31
Вы проектируете маркетплейс на Nuxt 3 с 2000 маркетинговых и товарных страниц, поиском на основе query-параметров и авторизованным личным кабинетом. Какой режим рендеринга вы выберете для каждой группы маршрутов?
nuxtqueriesdesign - 32
При 200 параллельных SSR-запросах Nuxt данные авторизованного пользователя нужны только серверу, а локаль и тема должны попасть в гидрированную страницу. Что хранить в event.context, а что в useState?
hooksssrnuxt - 33
Страница Nuxt 3 рендерит локализованную дату, сгенерированный DOM id и отдельную ветку для мобильного экрана. Как вы обеспечите детерминированную гидратацию?
domhydrationnuxt - 34
Три компонента Nuxt 3 запрашивают одну страницу заказов, а фильтры могут быстро меняться. Как вы спроектируете ключи и дедупликацию для useAsyncData или useFetch?
componentsnuxtdesign - 35
SSR-страница Nuxt 3 получает профиль с Date, Map, внутренним токеном и пользовательским rich HTML. Что вы сериализуете в payload и как предотвратите XSS?
htmlssrnuxt - 36
В каталоге миллион товарных URL, 10 000 популярных страниц, жёсткий предел свежести 15 минут и бюджет регенерации origin в 20 запросов в секунду. Как настроить кэширование Nuxt?
nuxtcachingconfig - 37
На товарной странице Nuxt 3 запрос hero-блока занимает 80 мс, а запрос рекомендаций 1,5 секунды при целевом TTFB 200 мс. Как вы примените Suspense или streaming, не задерживая критическую часть страницы?
reactnuxtadvanced - 38
Библиотека графиков обращается к window во время импорта и не поддерживает SSR. Как вы интегрируете её в Nuxt 3 и какова цена ClientOnly?
ssrnuxt - 39
Пользователи находятся по всему миру, но основная PostgreSQL расположена в eu-west-1, а персонализированный маршрут Nuxt выполняет три последовательных запроса. Стоит ли рендерить этот маршрут на edge-узлах?
databasepostgresqueries - 40
Страница личного кабинета Nuxt 3 аутентифицируется через HttpOnly cookie и находится за CDN. Как не допустить выдачу SSR HTML одного пользователя другому?
htmlssrnuxt - 41
Vue-витрина проходит локальный Lighthouse, но пользователи жалуются на медленные страницы. Как вы зададите и измерите цели по Core Web Vitals?
web-vitalsvue - 42
Vue-таблица обновляет каждую строку, хотя меняется только выбранная строка. Как вы это спрофилируете и исправите?
vue - 43
Как виртуализировать Vue-грид со 100 000 строк переменной высоты, сохранив позицию прокрутки и доступность?
grida11yvue - 44
В списке 5000 дорогих превью Markdown, а не связанное с ними состояние курсора обновляется 60 раз в секунду. Когда поможет v-memo и что должно войти в его зависимости?
dependencies - 45
Форма на Vue 3.5 рендерит поля через v-for и после сортировки должна поставить фокус по ID элемента. Как управлять template refs, не полагаясь на порядок массива refs?
formscomponentsvue - 46
Vue SPA отправляет 1,2 МБ сжатого JavaScript на первом маршруте. Как вы разделите код и не позволите бандлу снова вырасти?
vuejavascript - 47
Спроектируйте Vue-дашборд аналитики с 10 виджетами от разных API, где один медленный API не должен блокировать страницу.
designvue - 48
Как вы спроектируете Vue-форму для выездных сотрудников, которая должна работать офлайн и синхронизировать правки позже?
formsvuedesign - 49
Биллингом владеют шесть инженеров с еженедельными релизами, а каталогом команда из десяти человек с ежедневными релизами; оба домена используют Vue 3.5, но несовместимые модели Pinia. Стоит ли провести между ними границу микрофронтенда?
state-managementvue - 50
Компонент Select используется в четырёх Vue-приложениях; следующий релиз добавляет асинхронные варианты и меняет клавиатурное управление. Какие контракты и правила выпуска сохранят совместимость?
componentsvueasync - 51
После релиза 12 карточек с KPI остаются на начальных значениях, хотя SSE-сообщение обновляет реактивный dashboardState каждые 2 секунды. В релизе activeUsers и errorRate деструктурировали из этого объекта. Как вы найдёте и исправите проблему?
reactreactivitydestructuring - 52
В shallowRef хранится снимок результатов поиска из 50 000 записей, но фоновый поток изменяет 600 записей, а количество результатов остаётся равным 12 481. Код меняет snapshot.value.records на месте, а затем снова присваивает snapshot.value тот же объект. Что вы сделаете?
reactivitysnapshot - 53
computed возвращает объект с rows и summary для таблицы из 300 строк. Таймер актуальности с интервалом 500 мс инвалидирует computed, и Vue DevTools фиксирует 120 обновлений таблицы в минуту, хотя строки и итоговые значения не меняются. Как убрать лишнюю работу?
reactivityvue - 54
watchEffect загружает события аудита по orgId и severity, но изменение severity после обновления токена за 80 мс ничего не делает, тогда как изменение orgId правильно запускает новый запрос. Эффект читает severity только после await. Как исправить проблему?
incidentsasynctokens - 55
Ввод одного пробела в фильтр вызывает предупреждение Vue о максимальном количестве рекурсивных обновлений, одно ядро процессора загружается на 100%, а до зависания страницы запускаются 37 запросов к API. Глубокий watcher удаляет пробелы, присваивая новый объект фильтра. Как остановить цикл?
reactivityvueapi - 56
Маршрут 300 мс ждёт разрешения, а затем создаёт watcher внутри обработчика Promise. После 20 посещений одно изменение настроек запускает 20 одинаковых запросов, хотя все старые компоненты уже размонтированы. Как исправить утечку?
componentsreactivitypromises - 57
После 20 переходов между страницей клиента и панелью управления объём памяти Chrome растёт с 72 до 382 МБ, причём каждая страница клиента хранит набор строк размером 15 МБ. Как найти и устранить цепочку удержания памяти?
data-structures - 58
KeepAlive кэширует 18 аналитических представлений, каждое из которых удерживает два набора данных по 8 МБ и график WebGL. После открытия 12 вкладок объём памяти достигает 480 МБ, а браузер сообщает о потере графических контекстов. Что вы измените?
cachingdata-structures - 59
При перетаскивании разделителя панели Vue ResizeObserver вызывает обработчик примерно 120 раз за кадр, одно ядро процессора загружается на 100%, а Chrome сообщает о цикле ResizeObserver. Обработчик записывает ширину того же элемента, за которым наблюдает. Как это исправить?
vuecallbacks - 60
Сервис уведомлений создаёт effectScope(true) при каждом входе. После четырёх смен аккаунта одно событие показывает четыре уведомления, а четыре подписки WebSocket остаются активными. Как перепроектировать жизненный цикл сервиса?
websockets - 61
После релиза Nuxt предупреждения о гидратации появляются при 18% посещений страницы оформления заказа, у мобильных пользователей меняется ширина панели доставки, а часть сгенерированных меток перестаёт быть связана со своими полями ввода. Как вы отреагируете на инцидент?
hydrationnuxtssr - 62
Страница тарифов Nuxt сообщает о несовпадении узлов при гидратации во всех браузерах, хотя данные на сервере и клиенте одинаковы. Конверсия упала на 6% после того, как в компоненте span внутри абзаца заменили на div. Что вы проверите и измените?
componentshydrationnuxt - 63
Команда обернула весь аналитический блок высотой 900 px в ClientOnly ради поддержки одной библиотеки графиков. На мобильных устройствах CLS вырос с 0,04 до 0,31, а LCP с 2,1 до 3,8 секунды. Как вы отреагируете на инцидент?
incidents - 64
После перехода двух виджетов панели Nuxt на useAsyncData API заказов получает 2,2 запроса на каждый переход, а 3% пользователей видят суммы по клиентам в виджете выручки. Оба вызова используют ключ dashboard. Как вы найдёте и исправите проблему?
decision-makingapinuxt - 65
Во время распродажи с нагрузкой 300 запросов в секунду 0,2% SSR-ответов Nuxt ненадолго показывают счётчик корзины другого покупателя, пока гидратация не исправит его. Экземпляр Pinia экспортируется из серверного модуля. Как вы отреагируете?
hydrationssrstate-management - 66
Операторы дважды переключают склады за 600 мс, но первый запрос остатков иногда завершается последним и перезаписывает данные выбранного склада. Неверные остатки отображаются в 4% таких сессий. Как вы исправите действие Pinia?
state-managementsessionswarehouse - 67
Два сотрудника поддержки обновляют один заказ версии 52. Один оптимистичный возврат денег завершается ошибкой 409 после успешного исправления адреса, а текущий откат восстанавливает весь старый заказ. Как вы ограничите ущерб и перепроектируете этот процесс?
lockingrollback - 68
Вернувшиеся пользователи с сохранённым компактным состоянием навигации Pinia получают предупреждения о гидратации при 12% просмотров страниц Nuxt и CLS 0,18, а новые пользователи с проблемой не сталкиваются. Каковы ваш диагноз и постоянное исправление?
hydrationstate-managementnuxt - 69
Семь клиентов сообщили, что до 45 секунд видели платёжную сводку другой компании. Журналы CDN показывают ответы HIT для аутентифицированных SSR-страниц Nuxt, а ключ кэша содержит только URL. Что вы сделаете?
ssrnuxtcaching - 70
На странице поиска Nuxt API результатов отвечает за 180 мс, а API аналитики за 2,4 секунды, но TTFB в рабочей среде равен 2,6 секунды, несмотря на границу Suspense. CDN отправляет ответ одним фрагментом. Как вы вернёте целевое время первого байта?
reactnuxtadvanced - 71
По данным RUM сразу после выпуска массового редактирования INP p75 ухудшился со 180 до 420 мс. Как вы найдёте и устраните причину регрессии?
- 72
Выбор одной строки в Vue-таблице из 500 строк теперь перерендеривает все 500 и занимает 210 мс. Что вы измените?
vue - 73
В Vue-форме 20 000 полей распределены по 40 секциям; каждое нажатие перерендеривает все секции, а INP p75 достигает 380 мс, потому что provider заменяет общий объект с состоянием и командами. Как это исправить?
formscomponentsvue - 74
Маршрут со списком клиентов монтирует 100 000 элементов Vue, зависает на 9,4 секунды и увеличивает кучу до 1,1 ГБ. Как сделать его пригодным для работы?
vuedata-structures - 75
Оптимизацию с v-memo успешно выпустили, но после смены валюты цены в некоторых строках счетов остаются прежними. Как вы найдёте и исправите проблему?
optimization - 76
После выпуска функции отчётов объём сжатого JavaScript при начальной загрузке вырос на 40 процентов, а мобильный LCP p75 ухудшился с 2,1 до 3,4 секунды. Как вы устраните регрессию?
javascript - 77
Рефакторинг с разделением кода уменьшил общий объём данных, но первый переход в аналитику стал на 1,3 секунды медленнее из-за каскада запросов. Как это исправить?
methodologyrefactoring - 78
Новый виджет поддержки блокирует основной поток на 360 мс и ухудшает INP p75 при оформлении заказа со 190 до 310 мс. Как вы отреагируете в продакшене?
concurrency - 79
Через 15 минут экран текущих остатков начинает работать рывками: куча достигает 780 МБ, а полные циклы сборки мусора приостанавливают работу на 180 мс. Как снизить нагрузку на память из-за глубокой реактивности?
gcmemoryreact - 80
После выпуска страницы товара на Nuxt CLS p75 вырос с 0,04 до 0,23: содержимое сдвигают главное изображение, веб-шрифт и поздно появляющаяся акция. Как вы исправите и проверите это?
nuxt - 81
Нужно за шесть месяцев перевести приложение из 200 компонентов с Vue 2 на Vue 3. Им пользуются 80 000 человек в день, замораживать разработку новых функций нельзя, а откат должен занимать не больше 15 минут. Как вы примените migration build?
componentsvuemigrations - 82
После перехода на Vue 3 четыре команды продолжают еженедельно выпускать изменения в 80 компонентах на Options API. На миграцию выделено только 20 процентов времени. Как внедрить Composition API без кампании по полному переписыванию?
componentscomposition-apioptions-api - 83
В старом приложении 14 mixins используются в 63 компонентах. Ошибки в production возникают из-за трёх коллизий в data и methods, а также из-за скрытой зависимости от предсказуемого, но неочевидного порядка объединения хуков Vue. Как заменить mixins, не останавливая релизы?
componentshooksvue - 84
Шесть команд используют 24 общих Vuex-модуля, включая динамические модули и плагины сохранения состояния, но в этом квартале на Pinia можно перенести только три домена. Как обеспечить сосуществование двух хранилищ без двух источников истины?
state-management - 85
В кодовой базе Vue 2 есть 42 template filters, 18 вручную написанных render components и 12 functional components. При миграции на Vue 3 DOM на этапе оформления заказа должен остаться идентичным. Какую последовательность действий вы выберете?
componentsdomvue - 86
Заброшенный плагин для Vue 2 работает на 35 экранах планирования и обеспечивает 28 процентов выручки. Он использует Vue.prototype и старый VNode API, а версии для Vue 3 нет. Полная замена займёт четыре месяца, но миграцию нужно начать через шесть недель. Что вы сделаете?
vueapimigrations - 87
В старом Vue-приложении 120 000 строк кода, 90 JavaScript SFC и шесть разработчиков, а новые функции нужно выпустить за три спринта. Как внедрить TypeScript без остановки разработки и маскировки всех проблем через any?
typescriptjavascriptestimation - 88
Нужно перенести маркетплейс с Nuxt 2 на Nuxt 3. В нём 300 маршрутов, 12 модулей, SSR-аутентификация и один миллион посещений в день, а SEO-трафик не должен упасть больше чем на 1 процент. Как разбить миграцию на этапы?
ssrnuxtauth - 89
При миграции 200 компонентов с Vue 2 на Vue 3 старый набор из 1 600 тестов на Jest и Vue Test Utils 1 сильно зависит от снапшотов внутренней реализации. Как доказать паритет, не замораживая внутреннее устройство Vue 2?
jestsnapshotcomponents - 90
Миграционный релиз Vue 3 получит 600 000 сессий в день в десктопных и мобильных браузерах. Какую схему canary, метрики успеха и правила автоматического отката вы одобрите?
monitoringrollbackmigrations - 91
Инженер добавил 12 watchers с deep: true для синхронизации формы расчёта из шести шагов. Ввод в одно поле запускает 18 валидаций, а до релиза осталось пять дней. Как вы поможете инженеру разобраться и при этом безопасно выпустите задачу?
formsreactivityvue - 92
На ревью общего Vue-компонента DateField вы замечаете, что modelValue меняют со строки ISO на объект Date. Компонент используется в 63 местах четырёх приложений, а команда приложения для расчёта зарплаты не сможет перейти на новую версию ещё три недели. Что вы сделаете?
vue - 93
После добавления виртуализации в Vue Select с 400 вариантами пользователи клавиатуры могут открыть список, но ArrowDown переводит активный пункт на ещё не смонтированный элемент, а Enter больше не выбирает его. В результате доля завершённых оформлений заказа в клавиатурных сессиях упала на 6 процентов. Как вы устраните регрессию?
soft-skillsvirtualizationsessions - 94
Один из 80 SSR-тестов Nuxt падает в 6 процентах запусков CI с восемью воркерами и показывает валюту из другого теста, хотя локально всегда проходит. Перед завтрашним релизом команда предлагает просто добавить повторные запуски. Что вы сделаете?
ssrnuxttesting - 95
Диалог подтверждения телепортируется из другого Vue-диалога; Escape закрывает оба окна, фон остаётся доступным для фокуса, а в 7% клавиатурных сессий фокус возвращается не туда. Как это исправить?
advancedvuesessions - 96
Оболочка Vue выкатывает версию 4 контракта с remote-модулем, хотя микрофронтенд биллинга всё ещё предоставляет версию 3. Кроме того, кешированные remote-манифесты указывают на удалённый chunk, поэтому микрофронтенд не монтируется в 7 процентах сессий биллинга. Как вы устраните инцидент и обеспечите совместимость?
incidentsdeploymentcaching - 97
Для Vue-плагина аутентификации, который используется в шести SSR-приложениях, вышла версия 4.2.1 с исправлением доступной в этих приложениях уязвимости CVSS 8,8. Однако обновление меняет параметры install и внедряемый ключ сессии, а служба безопасности требует закрыть уязвимость в production за 24 часа. Как вы установите обновление?
ssrvueauth - 98
Vue-приложение для оформления заказа обслуживает 120 000 сессий в день. Средний объём телеметрии должен оставаться ниже 1 КБ на сессию, а юристы запрещают записывать исходные URL и значения полей формы. Какой SLO фронтенда и какие оповещения вы выберете?
formsvuesessions - 99
Два старших инженера спорят, использовать ли глубоко реактивный граф Pinia или неизменяемые снимки в shallowRef для Vue-редактора рабочих процессов на 5000 узлов. До бета-релиза осталось семь дней, p95 перетаскивания должен быть ниже 16 мс, а undo должен хранить 100 шагов. За шесть часов прототипы показали соответственно 28 мс и 310 МБ против 11 мс и 190 МБ. Как вы примете окончательное решение?
reactreactivitystate-management - 100
Во время выкладки удаляются старые асинхронные чанки, хотя кэшированный HTML всё ещё ссылается на них; маршруты не монтируются в 28% сессий, обнаружение занимает 14 минут, а откат 31 минуту. Как провести разбор инцидента?
deploymentrollbackcaching