Forbedring af Vue.js-appen. Nogle praktiske tips

 

   (( element.navn ))
 

... og vi vil se en fejl som denne:

Vi kan håndtere det ved at ved hjælp af JSX og en funktionel komponentVi skal også sende en boolean, og den vil erstatte v-if.

Skriv ikke api-kaldshåndteringer i komponenter

Faktisk er dette kun et af eksemplerne på, hvad man ikke bør gøre i komponenter. Gør blot, hvad der er lokalt nødvendigt i komponenternes logik. Alle metoder, der kan være eksterne, bør adskilles og kun kaldes i komponenter, f.eks. forretningslogik.

Et eksempel:

I stedet for en metode som denne:

created() (
this.fetchArticles();
),
metoder: (
 async fetchArticles() (
  prøv (
    const data = await axios.get(url);
    this.articles = data.articles;
    ) catch (e) (
    // håndterer fejl
    )
  )
)

Skriv noget i stil med dette - bare kald den rigtige metode, der vil returnere API-resultater:

 async fetchArticles() (
   prøv (
     this.articles = await ArticlesService.fetchAll();
   ) catch (e) (
     // håndterer fejl
   )
  )

Brug slots i stedet for store mængder rekvisitter

Nogle gange er det nok at bruge props, men der er også tilfælde, hvor de ikke er effektive. Det kan ske i situationer, hvor vi er nødt til at tilføje for mange props for at få komponenten til at fungere, som vi vil have det. Det simpleste eksempel kunne være en knapkomponent. Det er uden tvivl en komponent, som kan bruges overalt i en applikation. Så lad os se på en knapkomponent som denne.

(( tekst ))

På dette stadie er det en simpel komponent, som kun accepterer tekstprop. Ok, men det er måske ikke nok, da vi får brug for ikoner i knappen. I dette tilfælde skal vi tilføje yderligere 2 rekvisitter (2, fordi vi vil have mulighed for at tilføje før eller efter tekst). Så komponenten kommer til at se sådan ud:

(( tekst ))

Det er ikke dårligt, vi har kun tre rekvisitter, men...

Hvad hvis vi har brug for en belastningsindikator? Så er vi nødt til at tilføje endnu en prop. Og det er for hver eneste nye funktion! Lyder det udfordrende at holde trit med væksten i antallet af komponenter? Ja, det gør det helt sikkert!

Lad os bruge slots i stedet.

Enklere, ikke? Ok, men hvordan kan vi få funktionen med at tilføje ikoner? Det er virkelig nemt! Du skal bare bruge komponenten sådan her:

Tilbage

Næste

Nem måde at forbedre performance på

Jeg vil dele nogle tips med dig, som er virkelig nemme at implementere, så du kan få gavn af dem med det samme.

Lazy load-ruter

Nogle gange har vi ruter, der kun er tilgængelige for administratorer eller brugere med særlig adgang, og de bliver måske også besøgt mindre end andre. De er perfekte tilfælde til at bruge lazy load-ruten.

Du skal bare bruge pilfunktionen i din komponentegenskab til at returnere importfunktionen:

 export default new VueRouter (
   (
     tilstand: 'historie',
     routes: [
       (
         sti: '/landing',
         component: () => import('../pages/p-welcome'),
         navn: 'velkommen'
       ),
  ...

I stedet for:

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

export default new VueRouter (
(
tilstand: 'historie',
routes: [
(
sti: '/landing',
komponent: PWelcome, //jeg har lige importeret komponenten
navn: 'velkommen'
),

Doven indlæsning af Vue-komponenter

En lignende situation kan opstå med Vue-komponenter. Vi kan dovent importere komponenter fra en enkelt fil på denne måde:

const lazyComponent = () => import('pathToComponent.vue')
eksport standard (
komponenter: (lazyComponent )
)

// En anden syntaks
eksport standard (
komponenter: (
lazyComponent: () => import('pathToComponent.vue')
)
)

Takket være den dovne indlæsning af komponenten bliver den kun downloadet, når der anmodes om det. Hvis vi f.eks. har en komponent med v-if, vil der kun blive anmodet om den, hvis komponenten skal gengives. Så medmindre v-if-værdien er true, vil komponenten ikke blive indlæst. Derfor kan doven import også bruges til JavaScript filer.

Bonus: Når du bruger Vue CLI 3+, bliver alle dovent indlæste ressourcer forudindlæst som standard!

Brug gennemsigtige wrappers i stedet for attribut-props

Tænk på en komponent som denne:

Uden problemer kan vi bruge det sådan her:

eller

Det virker, fordi Vue giver dig mulighed for at sende html-attributter til komponenten, selv om du ikke har erklæret dem som props. Html-attributterne anvendes på komponentens rodelement (input i dette tilfælde).

Problemet opstår, når vi vil udvide vores inputkomponent, da den kunne se sådan ud:

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

Brug nu komponenten på denne måde:

vil ikke fungere, som vi ønsker, fordi typen og pladsholderen vil blive anvendt på div (rodelementet), og det giver ingen mening. Så vi er nødt til at håndtere det, fordi vi ønsker at tilføje vores attributter til input-elementet. Din første tanke er måske "lad os tilføje de rekvisitter, vi har brug for!", og det vil selvfølgelig fungere, men ... hvad nu, hvis vi vil bruge type, autofuldførelse, pladsholder, autofokus, handicappede, inputmodeosv., så er vi nødt til at definere props for hver html-attribut. Personligt bryder jeg mig ikke om denne lange metode, så lad os finde noget bedre!

Vi kan håndtere hele problemet i kun to linjer.

<template>
  <div class="form-group">
    <label :for="id">(( label ))</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>

Vi kan bruge v-bind="$attrs" og sende attributter direkte til . uden at deklarere store mængder rekvisitter. Husk også at tilføje muligheden inheritAttrs: false for at deaktivere overførsel af attributterne til rodelementet. Lad os gå lidt videre: Hvad nu, hvis vi skal tilføje event-lyttere til dette input? Igen kan det håndteres af props eller brugerdefinerede events, men der er en bedre løsning.

<template>
  <div class="form-group">
    <label :for="id">(( label ))</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>

Der er en ny beregnet egenskab, som returnerer komponenten til lyttere og tilføjer input-lytteren. Vi bruger det beregnede input ved blot at skrive v-on="lyttere".

Brug watcher med immediate option i stedet for den oprettede hook og watcher sammen

Vi henter ofte nogle data på en oprettet (eller monteret) hook, men så har vi brug for at hente disse data ved hver ændring af en egenskab, f.eks. den aktuelle side i en paginering. Nogle har en tendens til at skrive det ned sådan her:

.

Selvfølgelig virker det, men... Det er ikke den bedste tilgang, ikke engang en god en. Så lad os se, hvordan vi kan refaktorere dette, et eksempel på en ikke så dårlig tilgang:

.

Ovenstående version er bedre, fordi det ikke er nødvendigt med endnu en metode, vi har kun navngivet en metode, der skal kaldes på for at ændre watchedProperty.

En endnu bedre tilgang:

.

Vi er sluppet af med created-krogen. Ved at tilføje indstillingen 'immediate' får vi komponenten til at kalde fetchData-metoden umiddelbart efter observationens start (det er lidt før created-krogen og efter beforeCreated), så den kan bruges i stedet for created-krogen.

Oversigt over tips til Vue.js

Disse tips vil ikke gøre din ansøgning perfekt, men hvis du bruger dem, går det hurtigt. forbedre kvaliteten af din kode. Jeg håber også, at du vil finde noget af interesse i ovenstående eksempler.

Bemærk, at nogle af dem er blevet forenklet til artiklens formål.

Læs mere om det:

JavaScript er fuldstændig død. En fyr på internettet

Et dybere kig på de mest populære React-kroge

Softwareprojekter, hvor du kan bruge JavaScript