Forbedring av Vue.js-appen. Noen praktiske tips

 

   (( element.navn ))
 
 

...og vi vil se en slik feil:

Vi kan håndtere det ved å ved hjelp av JSX og en funksjonell komponentbør vi også sende en boolsk, og den vil erstatte v-if.

</>

Ikke skriv api-anropsbehandlere i komponenter

Dette er faktisk bare ett av eksemplene på hva du ikke bør gjøre i komponenter. Bare gjør det som er lokalt nødvendig i komponentlogikken. Alle metoder som kan være eksterne, bør skilles ut og bare kalles i komponenter, f.eks. forretningslogikk.

Eksempel:

I stedet for en metode som denne:

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

Skriv noe som dette - bare kall den riktige metoden som vil returnere API-resultater:

 async fetchArticles() (
   try (
     this.articles = await ArticlesService.fetchAll();
   ) catch (e) (
     // håndterer feil
   )
  )

Bruk spor i stedet for store mengder rekvisitter

Noen ganger er det akkurat nok å bruke props, men det finnes også tilfeller der de ikke er effektive. Det kan skje i situasjoner der vi må legge til for mange props for å få komponenten til å fungere slik vi ønsker. Det enkleste eksempelet kan være en knappkomponent. Det er uten tvil en komponent som kan brukes hvor som helst i en applikasjon. Så la oss se på en knappkomponent som denne.

(( tekst ))

På dette stadiet er det en enkel komponent som bare aksepterer tekstprop. Ok, men det er kanskje ikke nok ettersom vi trenger ikoner i knappen. I dette tilfellet må vi legge til ytterligere 2 rekvisitter (2, fordi vi ønsker å ha muligheten til å legge til før eller etter tekst). Så komponenten vil se slik ut:

(( tekst ))

Det er ikke så ille, vi har bare tre rekvisitter, men...

Hva om vi trenger en lasteindikator? Da må vi legge til enda en prop. Og det er for hver eneste nye funksjon! Høres det utfordrende ut å holde tritt med veksten i antall komponenter nå? Ja, det gjør det definitivt!

La oss bruke spilleautomater i stedet.

Enklere, ikke sant? Ok, men hvordan kan vi få funksjonen for å legge til ikoner? Det er veldig enkelt! Bare bruk komponenten slik:

Tilbake

Neste

Enkel måte å forbedre ytelsen på

Jeg vil dele noen tips med deg som er veldig enkle å implementere, slik at du kan dra nytte av dem umiddelbart.

Lazy load-ruter

Noen ganger har vi ruter som bare er tilgjengelige for administratorer, eller brukere med spesiell tilgang, og de kan også bli besøkt mindre enn andre. De er perfekte tilfeller for å bruke lazy load-ruten.

Bare bruk pilfunksjonen i komponentegenskapen din for å returnere importfunksjonen:

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

I stedet for:

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

export default new VueRouter (
(
mode: 'history',
routes: [
(
sti: '/landing',
component: PWelcome, //just importert komponent
navn: 'welcome'
),

Lat lasting av Vue-komponenter

En lignende situasjon kan oppstå med Vue-komponenter. Vi kan importere enkeltkomponenter på denne måten:

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

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

Takket være den dovne innlastingen av komponenten vil den bare lastes ned når den blir bedt om det. Hvis vi for eksempel har en komponent med v-if, vil den bare bli forespurt hvis komponenten skal gjengis. Så med mindre v-if-verdien er true, vil ikke komponenten bli lastet inn. Derfor kan lat import også brukes for JavaScript filer.

Bonus: Når du bruker Vue CLI 3+, blir alle ressurser som lastes inn på lazy loaded, forhåndshentet som standard!

Bruk gjennomsiktige wrappers i stedet for attributtprops

Tenk på en komponent som denne:

Uten problemer kan vi bruke den slik:

eller

Det fungerer, fordi Vue lar deg sende html-attributter til komponenten, selv om du ikke har deklarert dem som props. Html-attributtene brukes på komponentens rotelement (i dette tilfellet input).

Problemet oppstår når vi ønsker å utvide input-komponenten vår, siden den kan se slik ut:

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

Nå bruker du komponenten på denne måten:

vil ikke fungere som vi ønsker, fordi typen og plassholderen vil bli brukt på div (rotelementet), og det gir ingen mening. Så vi må gjøre noe med det, fordi vi ønsker å legge til attributtene våre i input-elementet. Din første tanke er kanskje "la oss legge til rekvisittene vi trenger!" og det vil selvfølgelig fungere, men ... hva om vi ønsker å bruke type, autofullfør, plassholder, autofokus, deaktivert, inputmodeosv., så må vi definere rekvisitter for hvert html-attributt. Personlig liker jeg ikke denne omstendelige metoden, så la oss se etter noe bedre!

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

<template>
  <div class="form-group">
    <label :for="id">(( etikett ))</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 bruke v-bind="$attrs" og sende attributter direkte til <input> uten å deklarere store mengder rekvisitter. Husk også å legge til alternativet inheritAttrs: false for å deaktivere overføring av attributtene til rotelementet. La oss gå litt lenger: Hva om vi trenger å legge til hendelseslyttere til denne inngangen? Igjen, det kan håndteres av props eller egendefinerte hendelser, men det finnes en bedre løsning.

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

Det finnes en ny beregnet egenskap som returnerer komponenten for lyttere og legger til input-lytteren. Vi bruker den beregnede inndataen ved ganske enkelt å skrive v-on="lyttere".

Bruk watcher med immediate-alternativet i stedet for å opprette hook og watcher sammen

Vi henter ofte data på en opprettet (eller montert) krok, men så må vi hente disse dataene ved hver endring av en egenskap, f.eks. gjeldende side i en paginering. Noen har en tendens til å skrive det ned slik:

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

Det fungerer selvfølgelig, men... Det er ikke den beste tilnærmingen, ikke engang en god en. Så la oss se hvordan vi kan refaktorere dette, et eksempel på en ikke så dårlig tilnærming:

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

Versjonen ovenfor er bedre fordi det ikke er nødvendig med en annen metode, vi har bare navngitt en metode som skal kalles på for å endre watchedProperty.

En enda bedre tilnærming:

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

Vi har kvittet oss med created-kroken. Ved å legge til alternativet "immediate" gjør vi at komponenten kaller på fetchData-metoden umiddelbart etter starten av observasjonen (det er litt før created-kroken og etter beforeCreated), slik at den kan brukes i stedet for created-kroken.

Vue.js tips sammendrag

Disse tipsene vil ikke gjøre søknaden din perfekt, men ved å bruke dem vil du raskt forbedre kvaliteten på koden din. Jeg håper også at du vil finne noe av interesse i eksemplene ovenfor.

Merk at noen av dem er forenklet for artikkelens formål.

Les mer om dette:

JavaScript er helt død. En fyr på Internett

En dypere titt på de mest populære React-krokene

Programvareprosjekter der du kan bruke JavaScript