React Frontend Developer

Question 1

В каких случаях могут рассматриваться Angular или Vue и чем они принципиально отличаются от React

Accepted Answer

Angular и Vue обычно рассматриваются, когда нужен более «из коробки» фреймворк с готовыми соглашениями. React — это библиотека, а не полноценный фреймворк, поэтому он требует самостоятельного выбора архитектуры и инструментов. Angular подходит для крупных корпоративных проектов с жесткими стандартами. Vue часто выбирают за более низкий порог входа и мягкую кривую обучения. Выбор зависит от масштаба проекта, команды и требований к архитектуре.

Question 2

В каких случаях предпочтительнее использовать v-if, а в каких v-show?

Accepted Answer

v-if лучше использовать, когда условие меняется редко или компонент тяжёлый для отрисовки. v-show предпочтительнее, если элемент нужно часто показывать и скрывать. v-if полностью добавляет и удаляет элемент из DOM, а v-show лишь меняет его видимость через CSS. Это влияет на скорость переключений и начальную загрузку. Выбор зависит от сценария использования.

Question 3

Какие хуки доступны до создания DOM-дерева компонента?

Accepted Answer

До создания DOM-дерева во Vue доступны хуки beforeCreate и created. В beforeCreate ещё нельзя работать с данными и методами. В created уже доступны данные, вычисляемые свойства и методы. Однако DOM на этом этапе ещё не существует. Эти хуки используются для инициализации логики, не связанной с DOM.

Question 4

Что произойдёт, если добавить новое свойство в объект после его инициализации во Vue?

Accepted Answer

Если добавить новое свойство в объект после его инициализации, Vue не сделает его реактивным автоматически. Такое свойство не будет отслеживаться системой реактивности. В результате изменения этого свойства не вызовут обновление шаблона. Это связано с тем, как Vue перехватывает доступ к свойствам. Для корректной работы нужно использовать специальные методы.

Question 5

В каких хуках жизненного цикла следует отписываться от событий?

Accepted Answer

Отписываться от событий следует перед уничтожением компонента. В Vue для этого используются хуки beforeUnmount и unmounted. В Vue 2 аналогами являются beforeDestroy и destroyed. Это гарантирует, что компонент больше не будет реагировать на внешние события. Такой подход предотвращает ошибки и утечки памяти.

Question 6

Какие способы существуют для реагирования на смену динамического id в маршруте?

Accepted Answer

Смену динамического id можно обрабатывать через watch на $route.params, через beforeRouteUpdate или через ключ key у <router-view>. Каждый способ имеет свои особенности. watch и beforeRouteUpdate обновляют данные без пересоздания компонента. Использование key приводит к пересозданию компонента.

Question 7

Почему изменение состояния должно происходить только через mutations?

Accepted Answer

Mutations обеспечивают единый и контролируемый способ изменения состояния. Если изменять state напрямую, становится сложно отслеживать источник изменений. Mutations делают изменения синхронными и явными. Это важно для отладки и поддержки приложения. Такой подход упрощает понимание потока данных.

Question 8

Какую роль играют actions при работе с асинхронной логикой?

Accepted Answer

Actions используются для выполнения асинхронной логики, такой как HTTP-запросы или таймеры. Они не изменяют состояние напрямую, а вызывают mutations. Это позволяет отделить бизнес-логику от изменения состояния. Такой подход делает код чище и понятнее. Actions — стандартное место для асинхронных операций.

Question 9

Зачем нужен key в v-for?

Accepted Answer

key нужен для того, чтобы Vue мог правильно сопоставлять элементы списка при обновлениях. Он помогает определить, какой элемент изменился, добавился или удалился. Без key Vue может переиспользовать DOM-узлы неправильно. Это приводит к визуальным и логическим багам. Поэтому key обязателен для динамических списков.

Question 10

Что произойдёт, если не использовать динамический :key, а передать строку?

Accepted Answer

Если передать строку в key без :, все элементы списка получат одинаковый ключ. Vue не сможет различать элементы между собой. Это ломает алгоритм обновления DOM. В результате возможны визуальные и логические ошибки. Такой key фактически бесполезен.

Вопросы React Frontend Developer