Vue.js rakenduse täiustamine. Mõned praktilised näpunäited

 

   (( item.name ))
 

...ja me näeme sellist viga :

Me saame sellega tegeleda kasutades JSX-i ja funktsionaalset komponenti, samuti peaksime edastama boolean ja see asendab v-if.

Ära kirjuta api-kõne käitlejaid komponentidesse

Tegelikult on see vaid üks näide sellest, mida te ei tohiks komponentides teha. Tehke lihtsalt seda, mis on komponentide loogikas lokaalselt vajalik. Iga meetod, mis võiks olla väline, tuleks eraldada ja kutsuda ainult komponentides, nt äriloogika.

Näide:

Selle asemel, et kasutada sellist meetodit:

created() (
this.fetchArticles();
),
meetodid: (
 async fetchArticles() (
  try (
    const data = await axios.get(url);
    this.articles = data.articles;
    ) catch (e) (
    // handle error
    )
  )
)

Kirjutage midagi sellist - kutsuge lihtsalt õiget meetodit, mis tagastab API tulemused:

 async fetchArticles() (
   try (
     this.articles = await ArticlesService.fetchAll();
   ) catch (e) (
     // handle error
   )
  )

Kasutage suure hulga rekvisiitide asemel teenindusajad

Mõnikord on rekvisiitide kasutamine lihtsalt piisav, kuid on ka juhtumeid, mil need ei ole tõhusad. See võib juhtuda olukordades, kus me peaksime lisama liiga palju rekvisiite, et komponent töötaks nii, nagu me tahame. Kõige lihtsam näide võiks olla nupukomponent. Kahtlemata on see komponent, mida võiks kasutada kõikjal rakenduses. Seega, vaatleme sellist nupukomponenti.

(( tekst ))

Praeguses etapis on tegemist lihtsa komponendiga, mis võtab vastu ainult teksti prop. Ok, kuid sellest ei pruugi piisata, sest me vajame nupule ikoone. Sellisel juhul peame lisama veel 2 rekvisiiti (2, sest me tahame, et oleks võimalus lisada enne või pärast teksti). Nii et komponent näeb välja selline:

(( tekst ))

See ei ole halb, meil on ainult 3 rekvisiiti, kuid...

Mis siis, kui vajame laadimisindikaatorit? Noh, siis peaksime lisama veel ühe tugipunkti. Ja seda iga uue funktsiooni puhul! Kas komponentide arvu kasvuga sammu pidamine kõlab nüüd väljakutse? Jah, kindlasti tundub!

Kasutame selle asemel teenindusajad.

Lihtsam, eks ole? Ok, aga kuidas me saame ikooni lisamise funktsiooni? See on tõesti lihtne! Lihtsalt kasutage komponenti nii:

Tagasi

Järgmine

Lihtne viis tulemuslikkuse parandamiseks

Jagan teiega mõned näpunäited, mida on tõesti lihtne rakendada, nii et saate kohe kasu.

Laised laadimisteed

Mõnikord on meil marsruute, mis on kättesaadavad ainult administraatoritele või kasutajatele, kellel on eriline juurdepääs, neid võidakse külastada vähem kui teisi. Need on ideaalsed juhtumid laiskade laadimisviiside kasutamiseks.

Lihtsalt kasutage noole funktsiooni oma komponendi omaduses, et tagastada importfunktsioon:

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

Selle asemel:

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

export default new VueRouter (
(
mode: 'history',
routes: [
(
path: '/landing',
component: PWelcome, //just imported component
name: 'welcome'
),

Laisk laadimine Vue komponendid

Sarnane olukord võib tekkida ka Vue komponendid. Me võime laisalt importida ühe faili komponente niimoodi:

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

// Teine süntaks
export default (
components: (
lazyComponent: () => import('pathToComponent.vue')
)
)

Tänu selle komponendi laiskale laadimisele laetakse see alla ainult siis, kui seda nõutakse. Näiteks, kui meil on komponent v-if, siis seda taotletakse ainult siis, kui komponent tuleb renderdada. Seega, kui v-if väärtus ei ole true, siis komponenti ei laadita. Seetõttu saab laisket importimist kasutada ka selleks, et kasutada JavaScript failid.

Boonus: Kui kasutad Vue CLI 3+, siis on iga laiskalt laetud ressurss vaikimisi eelkoostatud!

Kasutage läbipaistvaid ümbriseid atribuutide rekvisiitide asemel

Mõelge sellisele komponendile:

Ilma igasuguste probleemideta saame seda kasutada niimoodi:

või

See toimib, sest Vue võimaldab teil edastada komponendile html-atribuute, isegi kui te ei ole neid rekvisiitidena deklareerinud. html-atribuute rakendatakse komponendi juurelemendile (antud juhul sisend).

Probleem ilmneb siis, kui me tahame laiendada oma sisendkomponenti, sest see võiks välja näha nii:

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

Nüüd, kasutades komponenti sel viisil:

ei tööta nii, nagu me tahame, sest tüüp ja paigutuskirje rakendatakse div (juurelemendile) ja see ei ole mõttekas. Seega peame sellega tegelema, sest me tahame lisada oma atribuudid sisendelemendile. Teie esimene mõte võib olla "lisame vajalikud rekvisiidid!" ja muidugi see toimib, aga... mis siis, kui me tahame kasutada tüüp, Automaatne täitmine, platsihoidja, autofookus, puudega, inputmode, jne, siis peame määratlema rekvisiidid iga html-atribuudi jaoks. Mulle isiklikult ei meeldi see pikk meetod, seega otsime midagi paremat!

Me saame kogu probleemiga tegeleda vaid kaks rida.

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

Me võime kasutada v-bind="$attrs" ja anda atribuute otse ilma tohutuid rekvisiite deklareerimata. Samuti tuleb meeles pidada võimaluse lisamist inheritAttrs: false et keelata atribuutide edastamine juurelemendile. Läheme veidi edasi: mis siis, kui meil on vaja lisada sellele sisendile sündmuste kuulajad? Jällegi võiks seda käsitleda rekvisiitide või kohandatud sündmuste abil, kuid on olemas parem lahendus.

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

On uus arvutatud omadus, mis tagastab komponendi kuulajate jaoks ja lisab sisendkuulaja. Me kasutame seda arvutatud sisendit, kirjutades lihtsalt v-on="listeners".

Kasutage valvurit koos vahetu valikuga, selle asemel, et luua konks ja valvur koos

Sageli hangime mõned andmed loodud (või paigaldatud) konksu korral, kuid siis peame neid andmeid hangima iga omaduse muutmise korral, nt lehekülje jooksva lehekülje puhul. Mõned kipuvad seda nii kirjutama:

Muidugi, see toimib, aga... See ei ole parim lähenemine, isegi mitte hea. Niisiis, vaatame, kuidas me saame refaktoorida seda, Näide mitte nii halb lähenemine:

Ülaltoodud versioon on parem, sest teist meetodit ei ole vaja, me nimetasime ainult meetodi, mida tuleks kutsuda watchedProperty muutmiseks.

Veelgi parem lähenemine:

Saime lahti loodud konksust. Lisades valiku 'immediate', teeme selle komponendi üleskutse meetodile fetchData kohe pärast vaatluse algust (see on natuke enne loodud konksu ja pärast beforeCreated), nii et seda saab kasutada loodud konksu asemel.

Vue.js nõuannete kokkuvõte

Need näpunäited ei tee teie taotlust täiuslikuks, kuid nende kasutamine teeb kiiresti parandada oma koodi kvaliteeti. Samuti loodan, et leiate ülaltoodud näidetest midagi huvitavat.

Pange tähele, et mõned neist on artikli tarbeks lihtsustatud.

Loe edasi:

JavaScript on täiesti surnud. Mõni kutt internetis

Kõige populaarsemate React konksude sügavam uurimine

Tarkvaraprojektid, kus saab kasutada JavaScript-d