> Для чего используется teleport во Vue 3 (Vue.js)

Уровень: senior · Роль: frontend · Категория: Технические вопросы

Компании: Библио-Глобус

Стек: Vue.js

> Пример ответа

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

Teleport во Vue 3 используется для рендеринга содержимого компонента в другой части DOM-дерева, вне его текущей иерархии. Это решает проблемы с z-index, переполнением (overflow) и стилизацией при работе с модальными окнами, тултипами, уведомлениями и дропдаунами, которые должны отображаться поверх других элементов, но логически принадлежат определённому компоненту.

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

Teleport - это встроенный компонент Vue 3, который позволяет перемещать фрагмент шаблона в указанный DOM-элемент, сохраняя при этом реактивность и контекст компонента. Основная проблема, которую решает teleport - это ограничения CSS, связанные с позиционированием и наложением элементов.

Когда компонент глубоко вложен в дерево, его дочерние элементы наследуют CSS-свойства родительских контейнеров, такие как overflow: hidden, transform, z-index или opacity. Это может привести к тому, что модальное окно или выпадающий список окажутся обрезанными или неправильно позиционированными. Teleport позволяет физически разместить разметку в другом месте DOM (например, в <body> или в специальном контейнере), но при этом компонент остаётся частью логической иерархии Vue.

Teleport принимает обязательный prop to, который указывает целевой элемент (CSS-селектор, DOM-элемент или компонент). Можно также использовать disabled для условного отключения телепортации. Важно понимать, что teleport не создаёт отдельного экземпляра компонента - он лишь перемещает узлы DOM.

На практике

В реальных проектах teleport чаще всего применяется для:

модальных окон и диалогов - чтобы они рендерились в конце <body> и не зависели от родительских стилей
тултипов и поповеров - для корректного позиционирования относительно viewport
уведомлений и тостов - чтобы они отображались в фиксированной области, независимо от текущей страницы
дропдаунов в таблицах или списках - чтобы избежать обрезания при overflow: hidden
полноэкранных оверлеев и лоадеров

При использовании teleport стоит учитывать порядок в DOM: если несколько teleport указывают на один и тот же целевой элемент, их содержимое будет добавляться последовательно. Для управления порядком можно использовать CSS или дополнительные обёртки.

Пример кода

<template>
  <div class="page">
    <button @click="showModal = true">Открыть модалку</button>
    
    <Teleport to="body">
      <div v-if="showModal" class="modal-overlay" @click.self="showModal = false">
        <div class="modal-content">
          <h2>Модальное окно</h2>
          <p>Этот контент рендерится в body</p>
          <button @click="showModal = false">Закрыть</button>
        </div>
      </div>
    </Teleport>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const showModal = ref(false)
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
}
</style>

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

Начни с краткого определения, затем объясни проблему, которую решает teleport - ограничения CSS при вложенности. Приведи конкретные примеры использования в реальных проектах. Упомяни, что teleport сохраняет реактивность и контекст компонента, но физически перемещает DOM-узлы. Хорошо показать понимание trade-off: teleport решает проблемы с позиционированием, но может усложнить отладку, если не следить за целевыми элементами. Можно добавить, что teleport не влияет на жизненный цикл компонента и его слоты работают как обычно.

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

Интервьюер проверяет понимание DOM-архитектуры и проблем, связанных с CSS-контекстом. Важно показать, что ты не просто знаешь синтаксис, а понимаешь, когда и зачем применять teleport. Ожидается знание альтернатив (например, порталы в React) и умение объяснить, почему teleport предпочтительнее, чем простое позиционирование через fixed. Также проверяется понимание того, что teleport не создаёт нового скоупа стилей - scoped styles работают как обычно, но применяются к перемещённым элементам.

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

Использование teleport для всего подряд, когда достаточно обычного позиционирования
Неправильный селектор в prop to - забывают, что нужно указывать существующий элемент
Попытка телепортировать в элемент, который ещё не отрендерен на момент монтирования компонента
Игнорирование порядка рендеринга нескольких teleport в один целевой элемент
Забывают про disabled для условного отключения телепортации
Путают teleport с keep-alive или transition - это разные механизмы