Vue.js programos tobulinimas. Keletas praktinių patarimų

 

   ((( item.name ))
 

...ir pamatysime tokią klaidą:

Galime spręsti šią problemą naudojant JSX ir funkcinį komponentą, taip pat turėtume perduoti loginį simbolį ir jis pakeis v-if.

Nerašykite api skambučių tvarkyklių komponentuose

Tiesą sakant, tai tik vienas iš pavyzdžių, ko nereikėtų daryti komponentuose. Komponentų logikoje tiesiog darykite tai, kas būtina vietoje. Kiekvienas metodas, kuris galėtų būti išorinis, turėtų būti atskirtas ir kviečiamas tik komponentuose, pvz., verslo logikoje.

Pavyzdys:

Vietoj tokio metodo:

() (
this.fetchArticles();
),
metodai: (
 async fetchArticles() (
  try (
    const duomenys = await axios.get(url);
    this.articles = data.articles;
    ) catch (e) (
    // tvarkyti klaidą
    )
  )
)

Parašykite kažką panašaus - tiesiog iškvieskite tinkamą metodą, kuris grąžins API rezultatus:

 async fetchArticles() (
   try (
     this.articles = await ArticlesService.fetchAll();
   ) catch (e) (
     // tvarkyti klaidą
   )
  )

Naudokite laiko tarpsnius, o ne didelį kiekį rekvizitų

Kartais užtenka naudoti atramas, tačiau pasitaiko atvejų, kai jos nėra veiksmingos. Taip gali nutikti, kai norint, kad komponentas veiktų taip, kaip norime, reikėtų pridėti per daug rekvizitų. Paprasčiausias pavyzdys galėtų būti mygtuko komponentas. Be jokios abejonės, tai komponentas, kurį galima naudoti bet kurioje programos vietoje. Taigi apsvarstykime tokį mygtuko komponentą kaip šis.

(( tekstas ))

Šiame etape tai paprastas komponentas, kuris priima tik teksto rekvizitą. Gerai, bet to gali nepakakti, nes mums reikės piktogramų mygtuke. Tokiu atveju turime pridėti dar 2 rekvizitus (2, nes norime turėti galimybę pridėti prieš arba po teksto). Taigi komponentas atrodys taip:

(( tekstas ))

Nėra blogai, turime tik 3 atramas, bet...

Ką daryti, jei reikia krovimo indikatoriaus? Tuomet tektų pridėti dar vieną atramą. Ir taip yra su kiekviena nauja funkcija! Ar dabar neatsilikti nuo komponentų skaičiaus augimo skamba kaip iššūkis? Taip, tikrai taip!

Vietoj to naudokime laiko tarpsnius.

Paprasčiau, tiesa? Gerai, bet kaip galime gauti piktogramos pridėjimo funkciją? Tai labai paprasta! Tiesiog naudokite komponentą taip:

Atgal

Kitas

Lengvas būdas pagerinti našumą

Pasidalysiu keliais patarimais, kuriuos tikrai lengva įgyvendinti, kad iš karto gautumėte naudos.

Lėtosios apkrovos maršrutai

Kartais turime maršrutų, kurie prieinami tik administratoriams arba naudotojams, turintiems tam tikrą prieigą, jie taip pat gali būti lankomi rečiau nei kiti. Tai puikūs atvejai naudoti tingaus įkėlimo maršrutą.

Tiesiog naudokite rodyklės funkciją savo komponento savybėje, kad grąžintumėte importo funkciją:

 eksportas pagal nutylėjimą naujas VueRouter (
   (
     mode: 'history',
     routes: [
       (
         kelias: "/landing",
         component: () => import('../pages/p-welcome'),
         vardas: "welcome
       ),
  ...

Vietoj:

importuoti PWelcome iš '@/pages/p-welcome';

export default new VueRouter (
(
mode: 'history',
routes: [
(
kelias: "/landing",
komponentas: // tiesiog importuotas komponentas
pavadinimas: "welcome
),

Lėtas Vue komponentų krovimas

Panaši situacija gali nutikti ir su Vue komponentai. Galime tingiai importuoti vieno failo komponentus, pvz:

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

// Kita sintaksė
export default (
components: (
lazyComponent: () => import('pathToComponent.vue')
)
)

Dėl šio komponento tingaus įkėlimo jis bus atsisiunčiamas tik tada, kai bus paprašytas. Pavyzdžiui, jei turime komponentą su v-if, jo bus prašoma tik tada, kai komponentas bus atvaizduojamas. Taigi, jei v-if reikšmė nėra true, komponentas nebus įkeltas. Štai kodėl tingus importavimas gali būti naudojamas ir JavaScript failai.

Premija: Naudojant "Vue CLI 3+", kiekvienas tingiai įkeltas išteklius pagal nutylėjimą yra iš anksto parenkamas!

Vietoj atributų rekvizitų naudokite skaidrius apvalkalus

Panagrinėkite tokį komponentą kaip šis:

Be jokių problemų galime jį naudoti taip:

arba

Tai veikia, nes Vue leidžia komponentui perduoti html atributus, net jei jų nedeklaravote kaip rekvizitų. HTML atributai taikomi komponento šakniniam elementui (šiuo atveju įvesties elementui).

Problema iškyla, kai norime išplėsti įvesties komponentą, nes jis gali atrodyti taip:

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

Dabar, naudodami komponentą šiuo būdu:

neveiks taip, kaip mes norime, nes tipas ir žymeklis bus taikomi div (šakniniam elementui), o tai neturi jokios prasmės. Taigi, turime su tuo susidoroti, nes norime pridėti savo atributus prie įvesties elemento. Pirmoji jūsų mintis gali būti "pridėkime reikiamus rekvizitus!" ir, žinoma, tai suveiks, bet... ką daryti, jei norime naudoti tipas, automatinio užbaigimo funkcija, Vietoj, automatinis fokusavimas, neįgalieji, įvesties režimas, ir t. t., tada turime apibrėžti kiekvieno html atributo rekvizitus. Man asmeniškai šis ilgas metodas nepatinka, todėl ieškokime ko nors geresnio!

Visą problemą galime spręsti tik dvi eilutės.

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

Galime naudoti v-bind="$attrs" ir perduoti atributus tiesiogiai į nedeklaruojant didžiulių rekvizitų kiekių. Taip pat nepamirškite pridėti parinktį inheritAttrs: false išjungti atributų perdavimą šakniniam elementui. Eikime šiek tiek toliau: ką daryti, jei prie šios įvesties reikia pridėti įvykių klausytojų? Vėlgi, tai būtų galima tvarkyti rekvizitais arba pasirinktiniais įvykiais, tačiau yra geresnis sprendimas.

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

Yra nauja apskaičiuota savybė, kuri grąžina klausytojų komponentą ir prideda įvesties klausytoją. Mes naudojame tą apskaičiuotą įvestį tiesiog rašydami v-on="klausytojai".

Naudokite stebėtoją su parinktimi nedelsiant, o ne sukurtą kabliuką ir stebėtoją kartu

Dažnai tam tikrus duomenis gauname iš sukurto (arba sumontuoto) kabliuko, tačiau vėliau tuos duomenis reikia gauti kiekvieną kartą keičiant savybę, pvz., dabartinį puslapio puslapį. Kai kurie linkę tai užrašyti taip:

Žinoma, tai veikia, bet... Tai nėra pats geriausias būdas, net ne pats geriausias. Taigi, patikrinkime, kaip mes galime tai refaktorizuoti, Ne tokio blogo požiūrio pavyzdys:

Aukščiau pateiktas variantas yra geresnis, nes kito metodo nereikia, mes tik įvardijome metodą, kuris turėtų būti iškviestas norint pakeisti watchedProperty.

Dar geresnis būdas:

Atsikratėme sukurto kabliuko. Pridėję parinktį "immediate", šį komponento fetchData metodą iškviečiame iš karto po stebėjimo pradžios (tai šiek tiek anksčiau už sukurtąjį kabliuką ir po beforeCreated), todėl jį galima naudoti vietoj sukurtojo kabliuko.

Vue.js patarimų santrauka

Šie patarimai nepadarys jūsų paraiškos tobulos, tačiau jų naudojimas padės greitai pagerinti kodo kokybę.. Taip pat tikiuosi, kad pirmiau pateiktuose pavyzdžiuose rasite ką nors įdomaus.

Atkreipkite dėmesį, kad kai kurie iš jų buvo supaprastinti straipsnio tikslais.

Skaityti daugiau:

JavaScript yra visiškai miręs. Kažkoks vyrukas internete

Išsamesnė populiariausių React kabliukų apžvalga

Programinės įrangos projektai, kuriuose galite naudoti JavaScript