React Frontend Developer

Question 1

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

Accepted Answer

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

Question 2

В чём разница между v-if и v-show во Vue?

Accepted Answer

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

Question 3

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

Accepted Answer

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

Question 4

Какие хуки жизненного цикла существуют у Vue-компонента?

Accepted Answer

Vue-компонент проходит несколько этапов: создание, монтирование, обновление и уничтожение. Для каждого этапа существуют специальные хуки жизненного цикла. Они позволяют выполнять код в нужный момент времени. Например, инициализировать данные или очистить ресурсы. Знание этих хуков важно для управления логикой компонента.

Question 5

Какие хуки жизненного цикла Vue выполняются на серверной стороне?

Accepted Answer

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

Question 6

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

Accepted Answer

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

Question 7

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

Accepted Answer

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

Question 8

Как корректно добавлять новые реактивные свойства в объект во Vue?

Accepted Answer

Во Vue нельзя просто добавить новое свойство в объект и ожидать реактивности. Для этого используются специальные API. В Vue 2 применяется Vue.set или this.$set. В Vue 3 проблема решена за счёт Proxy, и новые свойства становятся реактивными автоматически. Выбор подхода зависит от версии Vue.

Question 9

В чём основное отличие computed-свойств от методов во Vue?

Accepted Answer

Главное отличие computed от методов — в кэшировании результата. computed пересчитывается только при изменении зависимостей. Метод вызывается при каждом рендере компонента. Это влияет на производительность и поведение приложения. computed подходит для вычислений на основе состояния.

Question 10

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

Accepted Answer

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

Вопросы React Frontend Developer