Ответы на вопросы для собеседования Vue.js
Что такое Vue.js?
Vue.js - это прогрессивный open-source фреймворк для разработки пользовательских интерфейсов, который стремится быть легко внедряемым в процесс разработки. Ядро библиотеки фокусируется только на "слое отображения", потому его можно легко интегрировать с множеством библиотек и внедрить в существующие проекты.
Основные фичи Vue.js
1. Виртуальный DOM: Vue использует виртульный DOM - такой же подход, как и у других существующих фреймворков (React, Ember и т.п.). VDOM - это хранимая в памяти репрезентация оригинального HTML DOM-дерева, которая обновляется и изменяется, не затрагивая при этом оригинальный DOM. 2. Компоненты: используются для создания переиспользуемых компонентов в любых приложениях на Vue. 3. Шаблоны: Vue предоставляет возможность шаблонизации, которая связывает HTML-разметку с данными компонента и экземпляра класса Vue. 4. Реактивность: Vue дает возможность создавать реактивные односторонние и двусторонние связи данных с их отображением. 5. Роутинг: перемещение между страницами реализовано при помощи библиотеки vue-router. 6. Легковесность: Vue - один из самых легковесных фреймворков в сравнении с другими.
В чем преимущества Vue 3?
Основные преимущества по сравнению с Vue 2: - улучшение производительности в среднем в 1.5-2 раза - Composition API - совместимость с TypeScript (в т.ч. типизация шаблонов) - новая концепция реактивности
Реактивность в Vue 2 и Vue 3
Во Vue 2 механизм реактивности строился на «геттерах» и «сеттерах».
Во Vue 3 концепция реактивности полностью построена на Proxy
. Это объект, который содержит в себе другой объект и позволяет «перехватывать» обращения к нему.
Proxy
во Vue 3 решает некоторые проблемы, присущие системе реактивности Vue 2. Например, добавление новых реактивных свойств в объект либо слежение за всем объектом, а не за единичным свойством.
Разница между v-show и v-if?
1. v-if
рендерит элемент в DOM-дереве только если выражение истинно, в то время как v-show
рендерит его при любом условии, но скрывает при помощи CSS.
2. v-if
поддерживает директивы v-else
и v-else-if
, в то время как v-show
не имеет альтернативной директивы.
3. v-if
требует больше ресурсов при переключении состояния для рендера, а v-show
позволяет делать это максимально быстро, но с соответствующими ограничениями.
4. v-if
поддерживает <template>
, а v-show
нет.
Нужен ли атрибут key?
<div v-for="item in items" :key="item.id">
{{item.name}}
</div>
Для того, чтобы отслеживать каждый уникальный элемент, и в дальнейшем эффективно их переиспользовать, нам нужен атрибут key
с уникальным значением для каждого элемента в цикле v-for
.
Перечислите хуки жизненного цикла компонента Vue
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- activated
- deactivated
- beforeUnmount
- unmounted
- errorCaptured
- renderTracked
- renderTriggered
Расскажите про beforeCreate и created
beforeCreate
: Вызывается синхронно сразу после инициализации экземпляра, перед установкой наблюдения за данными и механизмов слежения и событий.
created
: Вызывается синхронно после создания экземпляра. На этом этапе экземпляр закончил обработку опций и настроил наблюдение за данными, вычисляемые свойства, методы, коллбэки методов-наблюдателей и событий. Однако, фаза монтирования ещё не начата и свойство $el
на данный момент недоступно.
![Логотип Девстанции Логотип Девстанции](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Flogo.767d6ec0.png&w=32&q=75)
Расскажите про beforeMount и mounted
![Логотип Девстанции Логотип Девстанции](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Flogo.767d6ec0.png&w=32&q=75)
Расскажите про beforeUpdate и updated
![Логотип Девстанции Логотип Девстанции](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Flogo.767d6ec0.png&w=32&q=75)
Расскажите про activated и deactivated
![Логотип Девстанции Логотип Девстанции](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Flogo.767d6ec0.png&w=32&q=75)
Расскажите про beforeUnmount и unmounted
![Логотип Девстанции Логотип Девстанции](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Flogo.767d6ec0.png&w=32&q=75)
Расскажите про errorCaptured
![Логотип Девстанции Логотип Девстанции](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Flogo.767d6ec0.png&w=32&q=75)
Расскажите про renderTracked
![Логотип Девстанции Логотип Девстанции](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Flogo.767d6ec0.png&w=32&q=75)
Расскажите про renderTriggered
![Логотип Девстанции Логотип Девстанции](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Flogo.767d6ec0.png&w=32&q=75)
Вам может быть интересно
Топ тредов
: Задача в JS под названием "Соревнование" содержит ошибку
![Логотип Девстанции Логотип Девстанции](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Flogo.767d6ec0.png&w=48&q=75)
: Добавьте возможность ставить реакции на решенные задачи других коллег)
: Добавьте разделы по MongoDB и Nest.js
![Логотип Девстанции Логотип Девстанции](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Flogo.767d6ec0.png&w=48&q=75)