Förbättring av appen Vue.js. Några praktiska tips

 

   (( objekt.namn ))
 

... och vi kommer att se ett fel som det här:

Vi kan hantera det genom att med hjälp av JSX och en funktionell komponent, vi bör också skicka en boolean och den kommer att ersätta v-if.

</>

Skriv inte api-anropshanterare i komponenter

Egentligen är detta bara ett av exemplen på vad man inte ska göra i komponenter. Gör bara det som är lokalt nödvändigt i komponenternas logik. Varje metod som kan vara extern bör separeras och endast anropas i komponenter, t.ex. affärslogik.

Exempel:

Istället för en metod som denna:

skapad() (
this.fetchArticles();
),
metoder: (
 async hämtaArtiklar() (
  försök (
    const data = await axios.get(url);
    this.articles = data.articles;
    ) catch (e) (
    // hantera fel
    )
  )
)

Skriv något liknande - anropa bara rätt metod som kommer att returnera API-resultat:

 async hämta artiklar() (
   försök (
     this.articles = await ArticlesService.fetchAll();
   ) catch (e) (
     // hantera fel
   )
  )

Använd slots istället för stora mängder rekvisita

Ibland räcker det med att använda props, men det finns också fall då de inte är effektiva. Det kan hända i situationer där vi måste lägga till för många props för att få komponenten att fungera som vi vill att den ska göra. Det enklaste exemplet kan vara en knappkomponent. Utan tvekan är det en komponent som kan användas var som helst i en applikation. Så låt oss överväga en knappkomponent som den här.

(( text ))

I det här skedet är det en enkel komponent som bara accepterar textprop. Ok, men det kanske inte räcker eftersom vi kommer att behöva ikoner i knappen. I det här fallet måste vi lägga till ytterligare 2 rekvisita (2, eftersom vi vill ha möjlighet att lägga till före eller efter text). Så, komponenten kommer att se ut så här:

(( text ))

Det är inte illa, vi har bara tre rekvisita, men...

Vad händer om vi behöver en laddningsindikator? Ja, då måste vi lägga till en ny prop. Och det är för varje ny funktion! Låter det utmanande att hålla jämna steg med ökningen av antalet komponenter nu? Ja, det gör det definitivt!

Låt oss använda slots istället.

Enklare, eller hur? Ok, men hur kan vi få funktionen för att lägga till ikoner? Det är verkligen enkelt! Använd bara komponenten så här:

Tillbaka

Nästa

Enkelt sätt att förbättra prestandan

Jag kommer att dela med mig av några tips som är väldigt enkla att genomföra, så att du kan dra nytta av dem direkt.

Rutter för latent laddning

Ibland kan vi ha rutter som endast är tillgängliga för administratörer eller användare med särskild åtkomst, och de kan också besökas mindre än andra. De är perfekta fall för att använda lazy load-rutten.

Använd bara arrow-funktionen i din komponentegenskap för att returnera importfunktionen:

 export standard ny VueRouter (
   (
     läge: "history",
     rutter: [
       (
         sökväg: '/landning',
         component: () => import('../pages/p-welcome'),
         namn: 'välkommen'
       ),
  ...

Istället för..:

import PWelcome från '@/pages/p-welcome';

export standard ny VueRouter (
(
läge: 'historia',
rutter: [
(
sökväg: '/landning',
komponent: PWelcome, //just importerad komponent
namn: 'välkommen'
),

Ledig lastning Vue-komponenter

En liknande situation kan uppstå med Vue komponenter. Vi kan importera enstaka filkomponenter på det här sättet:

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

// En annan syntax
export default (
komponenter: (
lazyComponent: () => import('pathToComponent.vue')
)
)

Tack vare den lata laddningen av den komponenten laddas den bara ner när den begärs. Om vi till exempel har en komponent med v-if, kommer den endast att begäras om komponenten ska renderas. Så om inte v-if-värdet är sant kommer komponenten inte att laddas. Därför kan lazy importing också användas för JavaScript filer.

Bonus: När du använder Vue CLI 3+ är alla resurser som laddas slarvigt prefetched som standard!

Använd transparenta wrappers istället för attributprops

Tänk på en komponent som den här:

Utan några problem kan vi använda det så här:

eller

Det fungerar, eftersom Vue kan du skicka html-attribut till komponenten, även om du inte har deklarerat dem som props. HTML-attributen tillämpas på komponentens rotelement (input i det här fallet).

Problemet uppstår när vi vill expandera vår input-komponent, eftersom den skulle kunna se ut så här:

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

Nu använder vi komponenten på det här sättet:

kommer inte att fungera som vi vill, eftersom typen och platshållaren kommer att tillämpas på div (rotelement) och det är ingen mening. Så vi måste hantera det, eftersom vi vill lägga till våra attribut till inmatningselementet. Din första tanke kan vara "låt oss lägga till de rekvisita vi behöver!" och det kommer naturligtvis att fungera, men ... vad händer om vi vill använda typ, autokomplettering, platshållare, autofokus, funktionshindrad, inmatningslägeetc., så måste vi definiera props för varje html-attribut. Jag gillar personligen inte den här utdragna metoden, så låt oss leta efter något bättre!

Vi kan ta itu med hela problemet i bara två rader.

<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 använda v-bind="$attrs" och skicka attribut direkt till <input> utan att deklarera stora mängder rekvisita. Kom också ihåg att lägga till alternativet inheritAttrs: false för att inaktivera passering av attributen till rotelementet. Låt oss gå lite längre: tänk om vi behöver lägga till händelselyssnare till den här inmatningen? Återigen kan det hanteras av rekvisita eller anpassade händelser, men det finns en bättre 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 finns en ny beräknad egenskap som returnerar komponenten för lyssnare och lägger till input-lyssnaren. Vi använder den beräknade inmatningen genom att helt enkelt skriva v-on="lyssnare".

Använd watcher med alternativet immediate istället för att skapa hook och watcher tillsammans

Vi hämtar ofta data på en skapad (eller monterad) hook, men sedan behöver vi hämta data vid varje ändring av en egenskap, t.ex. aktuell sida i en paginering. Vissa tenderar att skriva ner det så här:

export default (
  namn: 'SomeComponent',
  watch: (
    someWatchedProperty() (
      this.fetchData();
    )
  ),
  skapad() (
    this.fetchData();
  ),
  metoder: (
    fetchData() (
      // hantera hämtning av data
    )
  )
);

Naturligtvis fungerar det, men ... Det är inte det bästa tillvägagångssättet, inte ens ett bra. Så, låt oss kolla hur vi kan refaktorisera detta, Ett exempel på inte så dåligt tillvägagångssätt:

export default (
namn: 'SomeComponent',
bevakning: (
  someWatchedProperty: 'hämta data'
),
  skapad() (
    this.fetchData();
  ),
  metoder: (
    fetchData() (
      // hantera hämtning av data
    )
  )
);

Ovanstående version är bättre eftersom det inte behövs någon annan metod, vi har bara angett en metod som ska anropas för att ändra watchedProperty.

Ett ännu bättre tillvägagångssätt:

export default (
    namn: 'SomeComponent',
    klocka: (
      someWatchedProperty: (
        hanterare: 'fetchData',
        omedelbar: true
      )
    ),
    metoder: (
      fetchData() (
        // hantera hämtning av data
      )
    )
  );

Vi har tagit bort den skapade kroken. Genom att lägga till alternativet "immediate" gör vi att komponenten anropar fetchData-metoden omedelbart efter observationens början (det är lite före created-kroken och efter beforeCreated), så att den kan användas i stället för created-kroken.

Vue.js tips sammanfattning

Dessa tips kommer inte att göra din ansökan perfekt, men om du använder dem kommer du snabbt att förbättra kvaliteten på din kod. Jag hoppas också att du kommer att hitta något av intresse i exemplen ovan.

Observera att vissa av dem har förenklats för artikelns syfte.

Läs mer om detta:

JavaScript är helt död. Någon snubbe på internet

En djupare titt på de mest populära React-krokarna

Programvaruprojekt där du kan använda JavaScript