Вопросы и ответы с собеседований по Vue.js

Vue.js - это прогрессивный open-source фреймворк для разработки пользовательских интерфейсов, который стремится быть легко внедряемым в процесс разработки. Ядро библиотеки фокусируется только на "слое отображения", потому его можно легко интегрировать с множеством библиотек и внедрить в существующие проекты.

1. Виртуальный DOM: Vue использует виртульный DOM - такой же подход, как и у других существующих фреймворков (React, Ember и т.п.). VDOM - это хранимая в памяти репрезентация оригинального HTML DOM-дерева, которая обновляется и изменяется, не затрагивая при этом оригинальный DOM. 2. Компоненты: используются для создания переиспользуемых компонентов в любых приложениях на Vue. 3. Шаблоны: Vue предоставляет возможность шаблонизации, которая связывает HTML-разметку с данными компонента и экземпляра класса Vue. 4. Реактивность: Vue дает возможность создавать реактивные односторонние и двусторонние связи данных с их отображением. 5. Роутинг: перемещение между страницами реализовано при помощи библиотеки vue-router. 6. Легковесность: Vue - один из самых легковесных фреймворков в сравнении с другими.

Основные преимущества по сравнению с Vue 2: - улучшение производительности в среднем в 1.5-2 раза - Composition API - совместимость с TypeScript (в т.ч. типизация шаблонов) - новая концепция реактивности

Во Vue 2 механизм реактивности строился на «геттерах» и «сеттерах». Во Vue 3 концепция реактивности полностью построена на Proxy. Это объект, который содержит в себе другой объект и позволяет «перехватывать» обращения к нему. Proxy во Vue 3 решает некоторые проблемы, присущие системе реактивности Vue 2. Например, добавление новых реактивных свойств в объект либо слежение за всем объектом, а не за единичным свойством.

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 нет.

<div v-for="item in items" :key="item.id"> {{item.name}} </div> Для того, чтобы отслеживать каждый уникальный элемент, и в дальнейшем эффективно их переиспользовать, нам нужен атрибут key с уникальным значением для каждого элемента в цикле v-for.

- beforeCreate - created - beforeMount - mounted - beforeUpdate - updated - activated - deactivated - beforeUnmount - unmounted - errorCaptured - renderTracked - renderTriggered

beforeCreate: Вызывается синхронно сразу после инициализации экземпляра, перед установкой наблюдения за данными и механизмов слежения и событий. created: Вызывается синхронно после создания экземпляра. На этом этапе экземпляр закончил обработку опций и настроил наблюдение за данными, вычисляемые свойства, методы, коллбэки методов-наблюдателей и событий. Однако, фаза монтирования ещё не начата и свойство $el на данный момент недоступно.