Czym są composables?

Czy zastanawiałeś lub zastanawiałaś się nad tym, jak można usprawnić zarządzanie wspólną logiką w aplikacjach Vue? Jeśli tak, to composables mogą być rozwiązaniem, którego szukasz. Po przeczytaniu artykułu będziesz wiedzieć, jak z nich korzystać.

Composables to potężny mechanizm, który umożliwia modularne podejście do kodu, pozwalając na łatwe tworzenie i reużywanie fragmentów logiki w różnych komponentach. Jeśli miałeś lub miałaś kiedyś do czynienia z Reactem to mechanizm ten może Ci bardzo przypominać hooki, których się tam używa.

W praktyce composables to kawałki kodu, które zawierają logikę aplikacji, możliwą do wielokrotnego wykorzystania w różnych komponentach Vue. Dzięki nim będziesz mógł lub będziesz mogła znacząco uprościć swój kod oraz uczynić go bardziej przejrzystym i łatwiejszym do utrzymania, co pozwoli Ci skupić się na tworzeniu funkcjonalności, a nie na powtarzaniu tych samych rozwiązań.

Poniżej wymieniłem kilka przykładów, które mogą posłużyć w niejednej aplikacji. Pierwszy z nich jest prezentowany na oficjalnej stronie dokumentacji Vue.

Aby ponownie wykorzystać tę logikę w wielu komponentach, możesz ją wyizolować do zewnętrznego pliku jako composable. Wówczas będzie można ją wykorzystać w osobnych komponentach, a każdy z nich będzie zarządzał własnym stanem.

Napiszmy zatem pierwszy composable 🤓

Na pierwszy rzut oka może się wydawać, że nie różni się to zbytnio od pierwotnej wersji napisanej bezpośrednio w pliku vue. Jednak prawdziwa siła tego podejścia leży w modularności i reużywalności, które oferuje. Choć ten przykład jest prosty i edukacyjny, doskonale ilustruje, jak composables mogą uprościć tworzenie i zarządzanie bardziej złożonymi funkcjonalnościami w większych projektach.

W ten oto sposób możesz teraz skorzystać z utworzonego przed chwilą composable useMousePosition w dowolnym komponencie:

Podam teraz kilka kolejnych przykładów, przedstawiając jedynie ich definicje, ponieważ ich zastosowanie działa dokładnie na tej samej zasadzie, jak pokazałem wcześniej.

Śledzenie rozmiaru okna przeglądarki może być kluczowe w responsywnych aplikacjach. Poniższy przykład pokazuje, jak można wykorzystać composable useWindowSize do monitorowania zmian rozmiaru okna.

Przykład demonstruje, jak można efektywnie zarządzać stanem asynchronicznym, takim jak pobieranie danych z serwera. Dzięki temu podejściu logika pobierania danych jest wyodrębniona i może być wielokrotnie używana w różnych komponentach.

Zauważ, że metodę fetchData udostępniam pod zmienioną nazwą refetchData, aby dać w ten sposób do zrozumienia, że pierwsze pobieranie występuje automatycznie.

Zarządzanie cyklicznymi zadaniami, takimi jak odświeżanie danych czy aktualizacja interfejsu, może być uproszczone dzięki composable useInterval. Poniższy przykład ilustruje, jak można zdefiniować i kontrolować funkcję uruchamianą w regularnych odstępach czasu.

Istnieje kilka ustalonych dobrych praktyk i konwencji, które pomagają w tworzeniu czytelnego i łatwego w utrzymaniu kodu przy użyciu composables.

Nazewnictwo: Zgodnie z konwencją, funkcje composable zaczynają się od przedrostka "use", na przykład useMousePosition lub useFetch. Takie nazewnictwo jednoznacznie identyfikuje funkcje composables, co ułatwia zrozumienie ich roli w kodzie. Tworzy to spójny styl w projekcie oraz zwiększa czytelność, co jest szczególnie korzystne przy pracy w zespole.

Argumenty wejściowe: Composables mogą przyjmować jako argumenty ref lub funkcje getter, co pozwala na dynamiczne reagowanie na zmiany tych wartości. Dzięki temu stają się bardziej elastyczne i mogą reagować na zmiany stanu w czasie rzeczywistym, co zwiększa ich użyteczność w różnych scenariuszach.

Zwracane wartości: Composables zazwyczaj zwracają obiekty zawierające zmienne ref, co zapewnia, że wartości te pozostają reaktywne. Dzięki temu, nawet po destrukturyzacji (więcej na ten temat znajdziesz w tym artykule) w komponencie, wartości te będą automatycznie aktualizowane w odpowiedzi na zmiany.

Composables w Vue 3 pozwalają na wydajne zarządzanie i ponowne wykorzystanie logiki aplikacji. Dzięki enkapsulacji i możliwości kompozycji, programiści mogą tworzyć bardziej zorganizowane i modułowe aplikacje. Zachęcam do praktykowania i uczenia się na błędach ⚠️, bo to jedna z najlepszych metod nauki.