Какие способы динамического рендера компонентов и директивы используются во Vue

Что проверяют

Понимаете ли вы, что происходит с компонентом при переключении: создаётся заново, прячется или берётся из кэша. Следом почти всегда спрашивают разницу v-if и v-show и как сохранить состояние вкладки при переключении.

Как отвечать

Речь о Vue 3. Основные механизмы:

• v-if, v-else-if, v-else: компонент создаётся и уничтожается целиком, с хуками жизненного цикла. При ложном начальном условии не рендерится вовсе;
• v-show: элемент рендерится всегда, переключается инлайн-стиль display: none. Переключение дешёвое, первый рендер дороже. На <template> не работает;
• <component :is>: встроенный специальный элемент, а не директива. Принимает имя зарегистрированного компонента или сам объект, в <script setup> передают импортированный объект. Храните его в shallowRef, иначе Vue сделает компонент реактивным и выдаст предупреждение;
• <KeepAlive>: кэширует экземпляры вместо уничтожения, настраивается include, exclude, max. Вместо монтирования срабатывают onActivated и onDeactivated;
• defineAsyncComponent: ленивая загрузка компонента отдельным чанком;
• v-for с :key: список компонентов. Смена key у одиночного компонента пересоздаёт его, это законный способ сбросить состояние;
• слоты: родитель решает, что рендерить внутри, имена слотов бывают динамическими, #[name];
• render-функции h() и JSX: когда логику выбора неудобно выражать шаблоном.

Остальные встроенные директивы стоит просто назвать: v-bind, v-on, v-model, v-slot, v-html, v-text, v-once, v-memo, v-pre, v-cloak. И упомянуть свои директивы с хуками mounted, updated, unmounted.

Где спотыкаются

Говорят, что v-show добавляет CSS-класс. Он ставит стиль прямо на элемент, это видно в DevTools.

Ставят v-if и v-for на один элемент. Во Vue 3 v-if выполняется первым и не видит переменную цикла, во Vue 2 было наоборот. Фильтровать нужно вычисляемым свойством.

Передают в :is строку с именем компонента, который импортирован в <script setup>, но не зарегистрирован. Vue рендерит на его месте неизвестный HTML-тег с таким именем, а не компонент.