Как работают функции provide и inject во Vue 3?

Релиз третьей версии фреймворка Vue предоставил разработчикам доработанный API для манипуляции состоянием приложения. Во Vue 3 были дополнены инструменты для реализации паттерна Dependency Injection. Использование этого паттерна вместе с доработанной системой реактивности позволяет разработчикам отказаться от использования VueX, MobX или любой другой библиотеки для управления стейтом приложения, и получить больший контроль над архитектурой приложения. Если все же решите отказаться от стейт менеджмента с помощью библиотек, то следует помнить, что

С большой силой приходит большая ответственность.

Появление provide и inject во Vue

Для инъекции зависимостей в компонентах Vue можно было использовать свойства provide и inject начиная ещё с версии 2.2.0. Но тогда они были частью объявления компонентов, и принцип их работы был интуитивно понятен: когда Vue находит в компоненте provide, то он ищет среди предков компонента нужные значение заданные свойством inject.

Переход на функциональную основу в третьей версии

Третья мажорная версия фреймворка расширила этот синтаксис и позволила использовать функции provide и inject для инъекции зависимостей. Особенность этих функций состоит в том, что они работают, как ожидается, только во время синхронного исполнения метода setup или синхронного исполнения методов жизненного цикла компонента. При этом соблюдается строгая иерархия зависимостей, т.е. у компонентов потомков есть доступ только к зависимостям от предков, а не все получают доступ к глобальным зависимостям. Проиллюстрировано на картинке выше.

// … const injectFunction = () => inject('key2', 'value2');  export default defineComponent({   setup() {     inject('key', 'value'); // работает     injectFunction(); // тоже работает     setTimeout(injectFunction); // а это не работает   },   methods: {     // вызов метода при браузерном событии (e.g. click) не сработает, а в методах жизненного цикла будет работать      injectFromMethod() {       inject('key', 'value');     },   }, }); 

Как устроены inject и provide под капотом

Внутрненний принцип работы этих функций не является очевидным. По крайней мере, мне он не показался очевидным, поэтому я копался в исходниках, чтоб во всем разобраться. Можно было б предположить, что функции provide и inject могут как-то знать в каком контексте вызваны, но это невозможно. Единственный способ передавать контекст, в котором вызвана функция в js это ее аргументы или this, но мы не используем ни то, ни другое. На самом деле контекст и не передается. Нам и не нужно его передавать. Vue просто хранит данные компонента, обработка которого происходит в данный момент, в отдельной переменной уровня видимости модуля. Просто представьте следующий код:

// … let currentInstance = null function renderComponent(componentInstance) {   currentInstance = componentInstance;   componentInstance.setup();   // do rest rendering logic   // also set currentInstance to be componentInstance whenever lifecycle hook is called }  export function provide(key, value) {   if (!currentInstance.provides) { 	  currentInstance.provides = Object.create(currentInstance.parent.provides);   }   currentInstance.provides[key] = value; }  export function inject(key) {   return currentInstance.parent.provides[key]; }

Выше наведен очень утрированный пример, без обработки многих крайних случаев (нулевые значения, асинхронный setup, дебаг логи, и т.д.), но в целом он дает нам возможность понять, как Vue DI работает на самом деле. Для хранения информации о том какие данные обеспечены (provided) используется обычное прототипное наследование, а для того, чтоб инъецировать зависимость мы просто получаем её из свойства provides компонента, обработка которого происходит в данный момент.

Мне подход с изменением значения переменной компонента, который обрабатывается в данный момент, показался хрупким и не идиоматичным, но тем не менее на практике он показывает себя достаточно надежным. Все приложения, в которых я использовал provide и inject, работали стабильно и проблем не возникало.

Много ключевого функционала Vue опирается на возможность получить компонент, который обрабатывается в данный момент. Более того Vue предоставляет возможность  разработчикам самим получить этот компонент с помощью экспортированной функции getCurrentInstance.

Как это можно использовать?

Зависимости, предоставленные с помощью provide можно получить только в дочерних компонентах, но не в компоненте который их предоставляет.

// … // такой код выведет предупреждения, а значение переменной value будет равно undefined export default defineComponent({   setup() {     provide('key', 'value');     const value = inject('key');   }, }); 

Что если существует гипотетическая ситуация, в которой нам понадобилось получить их в компоненте, который их предоставил? Давайте напишем реализацию функции, которая сможет инъецировать зависимости, в том числе предоставленные компонентом, который обрабатывается в данный момент.

// … // Такой код будет работать как нам нужно, т.е. значение переменной value будет получено // из свойства provide данного компонента export const injectFromCurrent = (key: string) => {   const componentInstance = getCurrentInstance() as any;   const componentProvides = componentInstance?.provides || {};   if (!(key in componentProvides)) {     console.warn(`injection ${key} not found.`);     return undefined;   }    const dependency = componentProvides[key];   return dependency; }; // … export default defineComponent({   setup() {     provide('key', 'value');     const value = injectFromCurrent('key');   }, }); 

Хотя в целом это будет полезно разработчикам плагинов к Vue или для на самом деле продвинутых юз-кейсов, чем большинству разработчиков приложений.

Выводы

Vue предоставляет разработчикам обширный функционал для эффективной разработки приложений и уже обошёл React по количеству звёзд на Github, что свидетельствует, о его популярности среди разработчиков. Использование 3 версии ещё не так распространено, хотя последняя версия фреймворка предоставляет много интересного функционала. Знание об их внутреннем устройстве может быть полезно как при решении задач связанных непосредственно связанных с Vue, так и при похожих фич у себя в приложении, не использующем какой-либо фреймворк.