Вопросы на собеседовании: Vue-разработчик

Vue является JavaScript-фреймворком, который строит пользовательский интерфейс из реактивного состояния и шаблонов компонентов.

• Декларативный код описывает вид UI для текущих данных вместо ручного изменения DOM-узлов.
• Когда отслеживаемое состояние меняется, Vue обновляет затронутые части отрисованного результата.
• Компоненты делят интерфейс на переиспользуемые части со своими входами, поведением и шаблоном.

Vue Single-File Component обычно хранит логику, разметку и стили в одном файле .vue.

• Секция script или script setup определяет состояние, импорты, props, события и логику компонента.
• Секция template задаёт HTML-структуру и привязки Vue.
• Секция style содержит CSS и может использовать scoped, чтобы ограничить селекторы этим компонентом.

createApp создаёт экземпляр Vue-приложения, а mount рендерит его корневой компонент в DOM-контейнер.

• Корневой компонент начинает дерево компонентов приложения.
• Плагины, глобальные компоненты и provide-значения уровня приложения обычно регистрируют до mount.
• Селектор или элемент, переданный в mount, указывает существующий контейнер страницы под управлением Vue.

Vue представляет результат виртуальными узлами и сравнивает новое дерево с предыдущим перед обновлением реального DOM.

• Рендер компонента создаёт лёгкое JavaScript-описание UI.
• Реактивные изменения повторно рендерят затронутый компонент, после чего Vue выполняет только необходимые DOM-операции.
• Стабильные keys и предсказуемые шаблоны помогают правильно сопоставить старые и новые дочерние узлы.

Vue записывает реактивные значения, прочитанные активным эффектом, и повторяет эффект при их изменении.

• Шаблоны, computed values и watchers могут выступать реактивными эффектами.
• ref использует объект с реактивным свойством value, а reactive перехватывает доступ к объекту через Proxy.
• Зависимости создают только отслеживаемые чтения, поэтому несвязанное состояние не обновляет каждый компонент.

ref создаёт реактивный контейнер, текущее значение которого читается и меняется через свойство value в JavaScript.

• Он работает и с примитивами вроде чисел и строк, и с объектами.
• Присваивание count.value уведомляет зависящие шаблоны, computed values и watchers.
• Шаблоны обычно автоматически разворачивают refs, поэтому используют count вместо count.value.

reactive возвращает глубоко реактивный Proxy для объекта, массива, Map или Set.

• Чтения и записи свойств отслеживаются через Proxy без обёртки value.
• Исходный простой объект не равен по идентичности Proxy, поэтому прикладной код должен использовать Proxy.
• reactive не предназначен для примитивов, поскольку у них нет свойств для перехвата.

Используйте ref для отдельных и заменяемых значений, а reactive для группы свойств объекта, изменяемых на месте.

• ref напрямую поддерживает примитивы и сохраняет реактивность при замене всего значения.
• reactive даёт удобный доступ к свойствам объекта, но их деструктуризация может потерять реактивность.
• Последовательная локальная договорённость важнее попытки поместить всё состояние в один примитив.

Vue убирает часть синтаксиса value в шаблонах, но правила разворачивания зависят от положения ref.

• Верхнеуровневый ref, доступный шаблону, обычно читается и изменяется без .value.
• Ref, хранящийся свойством reactive-объекта, разворачивается при доступе к свойству.
• Refs внутри массивов или нативных коллекций автоматически не разворачиваются, поэтому там нужно свойство value.

toRefs превращает каждое реактивное свойство в связанный ref, чтобы деструктуризация не ломала реактивность.

• Обычная деструктуризация копирует текущие значения свойств и отключает примитивные переменные от Proxy.
• Каждый возвращённый ref читает и записывает соответствующее исходное свойство.
• Это полезно, когда composable возвращает reactive-объект, поля которого вызывающий код хочет деструктурировать.

Options API группирует код по типам опций, а Composition API собирает связанное состояние и поведение вместе.

• Options-компоненты используют секции data, computed, methods, watch и lifecycle hooks.
• Composition-компоненты создают refs, computed values, watchers и hooks внутри setup или script setup.
• Оба API используют одну реактивность Vue и создают полноценные компоненты, поэтому выбор в основном касается организации и переиспользования.

script setup является compile-time синтаксисом, который делает объявления Composition API напрямую доступными шаблону.

• Импортированные компоненты используются в шаблоне без отдельного объекта регистрации components.
• Верхнеуровневые переменные, функции, refs и computed values видны шаблону.
• Compiler macros вроде defineProps и defineEmits объявляют интерфейс компонента без runtime-импортов.

Локальная регистрация делает компонент доступным только там, где он импортирован, а глобальная раскрывает его всему приложению.

• Локальные импорты показывают зависимости и упрощают удаление неиспользуемых компонентов из сборки.
• Глобальная регистрация подходит небольшому набору действительно универсальных UI-примитивов.
• Глобальная регистрация множества feature-компонентов скрывает зависимости и повышает риск конфликтов имён.

Props являются объявленными входами, которые родительский компонент передаёт дочернему.

• Дочерний компонент объявляет принимаемые имена и может задать их типы, обязательность и defaults.
• Родитель привязывает динамические значения через v-bind или сокращение с двоеточием.
• Props следуют однонаправленному потоку данных и считаются readonly внутри дочернего компонента.

Опции props документируют и проверяют значения, ожидаемые от родителя.

• type выполняет runtime-проверку в режиме разработки по конструкторам вроде String или Number.
• required сообщает о пропущенном prop, а validator задаёт дополнительное правило.
• Defaults объектов и массивов возвращают из factory function, чтобы экземпляры компонентов не разделяли одно изменяемое значение.

Дочерний компонент объявляет и испускает пользовательские события, а родитель слушает их на дочернем компоненте.

• В script setup defineEmits объявляет имена событий и возвращает функцию emit.
• Дочерний компонент может передать payload, например emit('save', formData).
• События компонентов не всплывают по дереву компонентов как нативные DOM-события.

Прямое изменение prop нарушает однонаправленный поток данных, поскольку исходным значением владеет родитель.

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

Компонентный v-model объединяет prop значения и соответствующее update-событие в синтаксис двусторонней привязки для родителя.

• Контракт Vue 3 по умолчанию использует prop modelValue и событие update:modelValue.
• Дочерний компонент не изменяет prop напрямую, а испускает новое значение.
• Именованные v-model позволяют компоненту раскрывать несколько независимо связанных значений.

Fallthrough attributes являются необъявленными атрибутами и listeners, которые Vue применяет к корневому элементу компонента.

• Распространённые примеры: class, style, id и listeners нативных событий.
• Компонент с несколькими корневыми узлами должен выбрать место для атрибутов, поскольку Vue не может определить единственную цель.
• inheritAttrs и объект attrs позволяют отключить или перенаправить автоматическое наследование.

v-bind вычисляет JavaScript-выражение и назначает результат HTML-атрибуту или prop компонента.

• Сокращение :href эквивалентно v-bind:href.
• Binding class и style поддерживает строки, массивы и объекты для условного оформления.
• v-bind без аргумента применяет все свойства объекта как атрибуты или props.