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

Короткий ответ

Во Vue динамический рендер компонентов реализуется через <component :is="...">, условный рендер с v-if/v-else-if/v-else, v-show для видимости, и динамические директивы через v-bind с объектом. Для динамического создания компонентов в runtime используются defineAsyncComponent, h() функция и render/setup функции. В Vue 3 также доступны динамические slots и Teleport.

Подробное объяснение

Динамический рендер во Vue строится на нескольких механизмах. Основной - <component :is="...">, где :is принимает строку с именем зарегистрированного компонента, объект с определением компонента или функцию, возвращающую компонент. Это позволяет переключать компоненты без изменения структуры шаблона.

Условный рендер через v-if полностью монтирует/демонтирует элемент или компонент, что подходит для редких переключений. v-show только переключает CSS display, оставляя DOM-элемент в дереве - оптимально для частых переключений видимости.

Динамические директивы реализуются через v-bind с объектом, где ключи - имена директив (например, { style: { color: 'red' }, class: 'active' }). В Vue 3 можно динамически применять пользовательские директивы через v-bind с префиксом.

Для асинхронной загрузки компонентов используется defineAsyncComponent, который возвращает Promise и позволяет задавать loading/error состояния. В runtime компоненты создаются через h() функцию (createElement в Vue 2) или в setup() с возвратом render-функции.

Teleport позволяет рендерить содержимое в другой части DOM-дерева, сохраняя реактивность. Динамические slots дают возможность менять содержимое слотов в зависимости от условий.

На практике

В реальных проектах динамический рендер используется для:

• Табов и вкладок, где содержимое переключается через <component :is="currentTab">
• Модальных окон с разным содержимым в зависимости от типа
• Форм с динамическими полями, где тип поля определяет компонент
• Lazy loading больших компонентов через defineAsyncComponent для оптимизации бандла
• Системы плагинов или виджетов, где компоненты загружаются по конфигу

Для производительности важно: v-if для редких переключений, v-show для частых, keep-alive для сохранения состояния переключаемых компонентов. При работе с :is нужно следить за регистрацией компонентов - локальной или глобальной.

Пример кода

<template>
  <div>
    <!-- Динамический компонент через :is -->
    <component :is="currentComponent" :data="componentData" />
    
    <!-- Условный рендер -->
    <div v-if="isLoading">Загрузка...</div>
    <div v-else-if="error">Ошибка: {{ error }}</div>
    
    <!-- Динамические директивы через v-bind -->
    <div v-bind="dynamicAttrs">Контент</div>
    
    <!-- Асинхронный компонент -->
    <AsyncComponent v-if="showAsync" />
  </div>
</template>

<script setup>
import { ref, computed, defineAsyncComponent } from 'vue'

const currentComponent = ref('ComponentA')
const componentData = ref({})
const isLoading = ref(false)
const error = ref(null)
const showAsync = ref(false)

// Динамические атрибуты
const dynamicAttrs = computed(() => ({
  class: { active: isActive, disabled: isDisabled },
  style: { color: textColor },
  'data-testid': 'dynamic-element'
}))

// Асинхронная загрузка
const AsyncComponent = defineAsyncComponent({
  loader: () => import('./HeavyComponent.vue'),
  loadingComponent: () => h('div', 'Загрузка...'),
  errorComponent: () => h('div', 'Ошибка загрузки'),
  delay: 200,
  timeout: 3000
})

// Создание компонента через h()
function createDynamicComponent(type, props) {
  return h(type, props)
}
</script>

Как отвечать на собеседовании

Начни с ключевых механизмов: <component :is>, условный рендер, динамические директивы. Покажи понимание trade-off между v-if и v-show. Упомяни defineAsyncComponent для оптимизации и h() для runtime-создания. Приведи пример из практики - табы или динамические формы. Подчеркни важность keep-alive для сохранения состояния. Не углубляйся в детали реализации виртуального DOM, если не спросят.

Что проверяет интервьюер

• Понимание разницы между монтированием/демонтированием и переключением видимости
• Знание механизмов динамической загрузки и оптимизации производительности
• Умение работать с runtime-созданием компонентов через render-функции
• Понимание системы директив и их динамического применения
• Опыт работы с асинхронными компонентами и lazy loading

Типичные ошибки

• Использование v-if для частых переключений вместо v-show
• Забывание зарегистрировать компонент для :is (особенно при локальной регистрации)
• Неправильное использование keep-alive с динамическими компонентами
• Создание компонентов через new Vue() или createApp() внутри рантайма вместо h()
• Игнорирование error/loading состояний в defineAsyncComponent
• Попытка передать директивы через строки в :is вместо объекта в v-bind