> Для чего нужен defineExpose во Vue 3 (Vue.js)

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

defineExpose во Vue 3 Composition API используется для явного указания, какие свойства или методы компонента должны быть доступны родительскому компоненту через template refs. Это необходимо, потому что по умолчанию Composition API не раскрывает внутреннее состояние компонента наружу, в отличие от Options API. Без defineExpose родитель не сможет получить доступ к данным или методам дочернего компонента через ref.

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

В Vue 3 Composition API компоненты по умолчанию изолированы - их внутреннее состояние (refs, reactive, computed, функции) не доступно извне. Это сделано для улучшения инкапсуляции и предотвращения случайного доступа к внутренним деталям реализации. defineExpose - это макрос компилятора, который работает только внутри <script setup>. Он принимает объект, ключи которого становятся публичными свойствами экземпляра компонента.

Когда родительский компонент использует ref для получения ссылки на дочерний компонент (например, <ChildComponent ref="childRef" />), он получает доступ только к тем свойствам, которые были явно переданы через defineExpose. Это особенно важно в сценариях, где нужно вызвать метод дочернего компонента или прочитать его реактивное состояние из родителя, например, для программного управления фокусом, валидации формы или анимации.

Без defineExpose в <script setup> все переменные и функции остаются приватными. В Options API эквивалентом было автоматическое раскрытие всех методов и данных, что часто приводило к нарушению инкапсуляции. defineExpose дает разработчику контроль над публичным API компонента.

На практике

defineExpose применяется в следующих типичных ситуациях:

• Управление фокусом: дочерний компонент (например, кастомный input) предоставляет метод focus() для родителя.
• Валидация формы: дочерний компонент формы предоставляет метод validate() или свойство isValid.
• Анимация: дочерний компонент предоставляет методы play(), pause() для управления анимацией.
• Библиотеки компонентов: авторы UI-библиотек используют defineExpose для предоставления публичного API своих компонентов.
• Интеграция с внешними библиотеками: когда нужно получить доступ к DOM-элементу внутри компонента через ref.

Важно не злоупотреблять defineExpose - его следует использовать только когда действительно нужен доступ из родителя. Если можно обойтись props/emits, лучше использовать их, так как они сохраняют однонаправленный поток данных.

Пример кода

<!-- ChildComponent.vue -->
<script setup>
import { ref } from 'vue'

const inputRef = ref(null)
const internalValue = ref('')

const focus = () => {
  inputRef.value?.focus()
}

const reset = () => {
  internalValue.value = ''
}

// Делаем focus и reset доступными для родителя
defineExpose({
  focus,
  reset
})
</script>

<template>
  <input ref="inputRef" v-model="internalValue" />
</template>

<!-- ParentComponent.vue -->
<script setup>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

const childRef = ref(null)

const handleClick = () => {
  // Вызываем метод дочернего компонента
  childRef.value?.focus()
  // childRef.value?.reset()
}
</script>

<template>
  <ChildComponent ref="childRef" />
  <button @click="handleClick">Focus input</button>
</template>

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

Начни с четкого определения: defineExpose - это макрос для явного раскрытия публичного API компонента. Объясни, почему это нужно: из-за инкапсуляции в Composition API. Приведи практический пример, например, управление фокусом или валидацию формы. Упомяни, что это альтернатива Options API, где всё было публично по умолчанию. Подчеркни, что злоупотреблять не стоит - лучше использовать props/emits. Если спросят про отличие от Options API, объясни, что defineExpose дает контроль, а не автоматическое раскрытие.

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

Интервьюер проверяет:

• Понимание инкапсуляции в Composition API и почему она важна.
• Знание разницы между <script setup> и Options API в контексте доступа к компоненту.
• Умение применять defineExpose в реальных сценариях (фокус, формы, анимации).
• Понимание trade-off: когда использовать defineExpose, а когда лучше props/emits.
• Знание, что defineExpose - это макрос, а не runtime-функция.

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

• Попытка использовать defineExpose вне <script setup> - это макрос, работающий только в этом контексте.
• Передача всего подряд в defineExpose - нарушает инкапсуляцию, лучше раскрывать только нужное.
• Забыть, что ref на компонент дает доступ только к expose-свойствам - новички часто пытаются обратиться к внутренним переменным напрямую.
• Использование defineExpose для передачи реактивных данных - для этого лучше использовать props или provide/inject.
• Путаница с expose в Options API - в Options API есть опция expose, но она работает иначе (ограничивает, а не раскрывает).