Как работают provide и inject во Vue?

`provide` и `inject` передают данные от предка к любому потомку, минуя промежуточные компоненты (избегают «prop drilling»).

Как использовать

// Предок
import { provide, ref } from 'vue';

const theme = ref('dark');
provide('theme', theme);

// Любой потомок
import { inject } from 'vue';

const theme = inject('theme', 'light');   // второй аргумент — значение по умолчанию

Рекомендации

• Передавать реактивные ссылки (ref), чтобы потомок видел изменения.
• Лучше ограничивать изменение данных: отдавать вместе с функцией-изменятором или только для чтения (readonly).
• Использовать Symbol или InjectionKey как ключ, чтобы избежать конфликтов имён и сохранить типы в TypeScript.

Когда подходит

Темы оформления, локаль, данные формы внутри составного компонента. Для глобальных данных приложения обычно лучше Pinia.

Коротко для собеседования

provide публикует данные предка, inject читает их у потомка на любой глубине. Передаём ref и ключ-символ.