Ulepszanie aplikacji Vue.js. Kilka praktycznych wskazówek

 

   (( 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.

Przykład:

Zamiast metody takiej jak ta:

created() (
this.fetchArticles();
),
metody: (
 async fetchArticles() (
  try (
    const data = await axios.get(url);
    this.articles = data.articles;
    ) catch (e) (
    // obsługa błędu
    )
  )
)

Napisz coś takiego - po prostu wywołaj odpowiednią metodę, która zwróci wyniki API:

 async fetchArticles() (
   try (
     this.articles = await ArticlesService.fetchAll();
   ) catch (e) (
     // obsłuż błąd
   )
  )

Używaj slotów zamiast dużych ilości rekwizytów

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:

 export default new VueRouter (
   (
     mode: 'history',
     routes: [
       (
         path: '/landing',
         component: () => import('../pages/p-welcome'),
         name: 'welcome'
       ),
  ...

Zamiast:

import PWelcome z '@/pages/p-welcome';

export default new VueRouter (
(
mode: 'history',
routes: [
(
path: '/landing',
component: PWelcome, //po prostu zaimportowany komponent
name: 'welcome'
),

Leniwe ładowanie komponentów Vue

Podobna sytuacja może mieć miejsce w przypadku Komponenty Vue. W ten sposób możemy leniwie importować pojedyncze komponenty plików:

const lazyComponent = () => import('pathToComponent.vue')
export default (
components: (lazyComponent )
)

// Inna składnia
export default (
components: (
lazyComponent: () => import('pathToComponent.vue')
)
)

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:

<code> <template>
   <div class="form-group">
     <label :for="id">(( etykieta ))</label>
     <input
       :id="id"
       :value="value"
       class="base-input"
       @input="$emit('input', $event.target.value)"
     >
   </div>
 </template>

Teraz, używając komponentu w ten sposób:

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.

<template>
  <div class="form-group">
    <label :for="id">(( etykieta ))</label>
    <!-- pay attention to v-bind="$attrs" -->
    <input
      :id="id"
      v-bind="$attrs"
      :value="value"
      class="base-input"
      @input="$emit('input', $event.target.value)"
    >
  </div>
</template>

<script>
export default (
  name: 'BaseInput',
  inheritAttrs: false, // <- pay attention to this line
  props: ['value', 'label', 'id']
);
</script>

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.

<template>
  <div class="form-group">
    <label :for="id">(( etykieta ))</label>
    <!-- pay attention to v-on="listeners" -->
    <input
      :id="id"
      v-bind="$attrs"
      :value="value"
      class="base-input"
      v-on="listeners"
    >
</div>
</template>

<script>
export default (
  name: 'BaseInput',
  inheritAttrs: false,
  props: ['value', 'label', 'id'],
  computed: (
    listeners() (
      return (
        ...this.$listeners,
        input: event => this.$emit('input', event.target.value)
      );
    )
  )
);
</script>

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:

<script>
export default (
  name: 'SomeComponent',
  watch: (
    someWatchedProperty() (
      this.fetchData();
    )
  ),
  created() (
    this.fetchData();
  ),
  methods: (
    fetchData() (
      // handle fetch data
    )
  )
);
</script>

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:

<script>
export default (
name: 'SomeComponent',
watch: (
  someWatchedProperty: 'fetchData'
),
  created() (
    this.fetchData();
  ),
  methods: (
    fetchData() (
      // handle fetch data
    )
  )
);
</script>

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.

Jeszcze lepsze podejście:

<script>
  export default (
    name: 'SomeComponent',
    watch: (
      someWatchedProperty: (
        handler: 'fetchData',
        immediate: true
      )
    ),
    methods: (
      fetchData() (
        // handle fetch data
      )
    )
  );
</script>

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.

Czytaj więcej:

JavaScript jest całkowicie martwy. Jakiś koleś w internecie

Dokładniejsze spojrzenie na najpopularniejsze haki React

Projekty oprogramowania, w których można wykorzystać JavaScript