Зачем нужен provide-inject?
Продвинутые темы
`provide`/`inject` (Vue) нужны для передачи данных от предка к потомкам на любой глубине без prop drilling — аналог Context API в React.
Что делает
Компонент-предок предоставляет (provide) данные, а любой потомок внедряет (inject) их, минуя промежуточные компоненты:
// Предок
import { provide } from 'vue';
provide('theme', 'dark');
// Любой потомок (на любой глубине)
import { inject } from 'vue';
const theme = inject('theme'); // 'dark'Зачем нужен
- Избежать prop drilling — не прокидывать props через каждый уровень.
- Сквозные данные — тема, локаль, авторизованный пользователь, конфигурация.
- Плагины/библиотеки — предоставлять общий контекст (i18n, store).
Реактивность
Чтобы потомки реагировали на изменения, предоставляют реактивное значение (ref/reactive):
const theme = ref('dark');
provide('theme', theme); // потомки увидят измененияЗначение по умолчанию
const theme = inject('theme', 'light'); // 'light', если не предоставленоprovide/inject против props
- props — явная передача родитель → ребёнок (один уровень), видно в интерфейсе компонента.
- provide/inject — неявная передача на любую глубину, для сквозных данных.
Аналог в React
Context API (createContext → Provider → useContext).
Коротко для собеседования
provide/inject (Vue) передают данные от предка потомкам на любой глубине без prop drilling: предок provide('key', value), потомок inject('key'). Для сквозных данных (тема, локаль, юзер, плагины). Реактивность — через ref/reactive. Аналог Context API в React.