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

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

1. Динамические компоненты через <component :is="..."> - позволяет переключать компоненты на лету, передавая строку с именем или сам объект компонента. Например: <component :is="currentComponent" />.

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

3. Динамические директивы - можно передавать имя директивы через переменную, используя синтаксис v-[dynamicDirective]. Например: v-[myDirective]="value".

4. Рендер-функции и JSX - позволяют программно создавать компоненты и директивы через h() (createElement) или JSX-синтаксис, что даёт полный контроль над динамикой.

5. Слоты (<slot>) и именованные слоты — динамически определяют контент внутри компонента, а также v-slot с динамическим именем: v-slot:[slotName].

6. Функциональные компоненты - легковесные компоненты без состояния, которые могут динамически рендериться на основе входных данных.

Пример динамического компонента с директивой:

<template>
  <component :is="currentView" v-if="showComponent" />
</template>
<script>
export default {
  data() { return { currentView: 'MyComponent', showComponent: true } }
}
</script>