Ulepszanie aplikacji Vue.js. Kilka praktycznych wskazówek
Dominik Grzedzielski
Senior Software Engineer
Vue to szybko rozwijający się progresywny framework do tworzenia interfejsów użytkownika. Stał się on frameworkiem JavaScript z największą liczbą gwiazdek na GitHubie i najczęściej wyróżnianym projektem 2016 i 2017 roku na tym samym portalu.
Creating applications in Vue jest naprawdę prosta, ale jeśli chcesz budować aplikacje dobrej jakości, czeka Cię nieco większe wyzwanie.
Bycie częścią The Codestzespół i prawdziwym zwolennikiem Technologia Vuechcę podzielić się kilkoma wskazówki (nie skopiowane z oficjalnych dokumentów Vue), które bez wysiłku poprawią kod jakość i Wydajność aplikacji Vue.
Po pierwsze, zastosuj przewodnik po stylach Vue i ESLint
Można tam znaleźć cztery kategorie zasad. Tak naprawdę zależy nam na trzech z nich:
Niezbędny zasady uniemożliwiające nam popełnianie błędów,
Zalecane i zdecydowanie zalecane zasady zachowania najlepszych praktyk - do poprawa jakości i czytelność kodu.
Możesz pomyśleć... "Co?! Czy muszę pamiętać każdą zasadę?" Oczywiście, że nie. Możesz użyć ESLint, aby zająć się tymi regułami za Ciebie. Musisz tylko odpowiednio ustawić wszystko w pliku konfiguracyjnym ESLint. Sugeruję użycie zalecany ustawienie wstępne ponieważ otrzymujesz całkowicie darmowy zestaw reguł, które pomogą Ci w tworzeniu aplikacji z dobrymi praktykami. Jak to skonfigurować?
Domyślnie powinieneś znaleźć rozciąga się w konfiguracji ESLint i zastąp "plugin:vue/essential" z "plugin:vue/recommended"to wszystko.
Oczywiście należy pamiętać o kilku zasadach, ponieważ ESLint nie jest w stanie poradzić sobie ze wszystkim samodzielnie. Na przykład:
spójne nazewnictwo,
nazewnictwo zdarzeń w kebab-case,
prefiks $_namespace_ prywatne właściwości we wtyczkach, mixinach itp,
kolejność elementów najwyższego poziomu pojedynczego pliku.
Nie używaj wielu v-if
Czasami może być konieczne warunkowe renderowanie więcej niż 1 elementu, ale ludzie często piszą coś takiego:
zawartość
treść
treść
Jest to niepotrzebne, ponieważ możemy napisać to bardziej elegancko:
Ale co, jeśli chcemy zrobić to jako element główny? W Vuenie możemy użyć <template> do tego celu. W niektórych przypadkach wystarczające może być owinięcie divem.
Jest to w porządku, ale czasami nie możemy zawijać elementów w div, na przykład ze względu na semantykę html (np. musi być bezpośrednim dzieckiem
lub ). Więc kiedy musimy napisać:
(( item.name ))
...i zobaczymy taki błąd:
Możemy sobie z tym poradzić poprzez przy użyciu JSX i komponentu funkcjonalnegoPowinniśmy również przekazać wartość logiczną, która zastąpi v-if.
</>
Nie pisz obsługi wywołań api w komponentach
W rzeczywistości jest to tylko jeden z przykładów tego, czego nie należy robić w komponentach. Po prostu rób to, co jest lokalnie konieczne w logice komponentów. Każda metoda, która może być zewnętrzna, powinna być oddzielona i wywoływana tylko w komponentach, np. w logice biznesowej.
Czasami użycie rekwizytów jest wystarczające, ale są też przypadki, w których nie są one wydajne. Może się to zdarzyć w sytuacjach, w których musielibyśmy dodać zbyt wiele rekwizytów, aby komponent działał tak, jak chcemy. Najprostszym przykładem może być komponent przycisku. Bez wątpienia jest to komponent, który może być używany w dowolnym miejscu w aplikacji. Rozważmy więc komponent przycisku taki jak ten.
(( tekst ))
Na tym etapie jest to prosty komponent, który akceptuje tylko rekwizyt tekstowy. Ok, ale to może nie wystarczyć, ponieważ będziemy potrzebować ikon w przycisku. W takim przypadku musimy dodać kolejne 2 rekwizyty (2, ponieważ chcemy mieć możliwość dodania przed lub po tekście). Tak więc komponent będzie wyglądał następująco:
(( tekst ))
Nie jest źle, mamy tylko 3 rekwizyty, ale...
Co jeśli potrzebujemy wskaźnika obciążenia? Cóż, musielibyśmy dodać kolejny rekwizyt. I to dla każdej nowej funkcji! Czy nadążanie za wzrostem liczby komponentów brzmi teraz jak wyzwanie? Tak, zdecydowanie tak!
Zamiast tego użyjmy slotów.
Prostsze, prawda? Ok, ale jak możemy uzyskać funkcję dodawania ikon? To naprawdę proste! Wystarczy użyć komponentu w ten sposób:
Powrót
Następny
Łatwy sposób na poprawę wydajności
Podzielę się z tobą kilkoma wskazówkami, które są naprawdę łatwe do wdrożenia, dzięki czemu możesz natychmiast skorzystać.
Leniwe ładowanie tras
Czasami możemy mieć trasy dostępne tylko dla administratorów lub użytkowników z określonym dostępem, mogą one być również odwiedzane rzadziej niż inne. Są to idealne przypadki do użycia trasy leniwego ładowania.
Wystarczy użyć funkcji strzałki we właściwości komponentu, aby zwrócić funkcję importu:
Dzięki leniwemu ładowaniu tego komponentu, będzie on pobierany tylko wtedy, gdy zostanie zażądany. Na przykład, jeśli mamy komponent z v-if, zostanie on zażądany tylko wtedy, gdy komponent ma zostać wyrenderowany. Jeśli więc wartość v-if nie jest prawdziwa, komponent nie zostanie załadowany. Dlatego leniwe importowanie może być również używane dla JavaScript pliki.
Bonus: Podczas korzystania z Vue CLI 3+, każdy leniwie ładowany zasób jest domyślnie wstępnie pobierany!
Używaj przezroczystych wrapperów zamiast rekwizytów atrybutów
Rozważmy komponent taki jak ten:
Bez żadnych problemów możemy używać go w ten sposób:
lub
To działa, ponieważ Vue umożliwia przekazywanie atrybutów html do komponentu, nawet jeśli nie zadeklarowano ich jako właściwości. Atrybuty html są stosowane do głównego elementu komponentu (w tym przypadku input).
Problem pojawia się, gdy chcemy rozszerzyć nasz komponent wejściowy, ponieważ może on wyglądać następująco:
nie będzie działać tak, jak chcemy, ponieważ typ i symbol zastępczy zostaną zastosowane do div (elementu głównego), a to nie ma sensu. Musimy więc sobie z tym poradzić, ponieważ chcemy dodać nasze atrybuty do elementu wejściowego. Pierwszą myślą może być "dodajmy rekwizyty, których potrzebujemy!" i oczywiście to zadziała, ale... co jeśli chcemy użyć typ, autouzupełnianie, symbol zastępczy, autofokus, wyłączony, inputmodeitd., wtedy musimy zdefiniować rekwizyty dla każdego atrybutu html. Osobiście nie lubię tej długiej metody, więc poszukajmy czegoś lepszego!
Możemy poradzić sobie z całym problemem w tylko dwie linie.
Możemy użyć v-bind="$attrs" i przekazywać atrybuty bezpośrednio do <input> bez deklarowania ogromnych ilości rekwizytów. Należy również pamiętać o dodaniu opcji inheritAttrs: false aby wyłączyć przekazywanie atrybutów do elementu głównego. Pójdźmy nieco dalej: co jeśli musimy dodać detektory zdarzeń do tego wejścia? Ponownie, może to być obsługiwane przez rekwizyty lub niestandardowe zdarzenia, ale istnieje lepsze rozwiązanie.
Istnieje nowa właściwość obliczana, która zwraca komponent dla słuchaczy i dodaje słuchacza wejściowego. Używamy tego obliczonego wejścia po prostu pisząc v-on="listeners".
Użyj watchera z opcją natychmiastową zamiast utworzonego haka i watchera razem
Często pobieramy pewne dane na utworzonym (lub zamontowanym) haku, ale potem musimy pobierać te dane przy każdej zmianie właściwości, np. bieżącej strony paginacji. Niektórzy mają tendencję do zapisywania tego w ten sposób:
Oczywiście, to działa, ale... Nie jest to najlepsze podejście, nawet nie dobre. Sprawdźmy więc, jak możemy to refaktoryzować, przykład nie tak złego podejścia:
Powyższa wersja jest lepsza, ponieważ kolejna metoda nie jest konieczna, nazwaliśmy tylko metodę, która powinna zostać wywołana w celu zmiany watchedProperty.
Pozbyliśmy się haka created. Dodając opcję "immediate" sprawiamy, że komponent ten wywołuje metodę fetchData natychmiast po rozpoczęciu obserwacji (jest nieco przed hakiem created i po beforeCreated), dzięki czemu można go użyć zamiast haka created.
Podsumowanie wskazówek Vue.js
Te wskazówki nie sprawią, że twoja aplikacja będzie idealna, ale ich stosowanie szybko ją udoskonali. poprawić jakość kodu. Mam również nadzieję, że znajdziesz coś interesującego w powyższych przykładach.
Należy pamiętać, że niektóre z nich zostały uproszczone na potrzeby artykułu.