Vue.js-sovelluksen parantaminen. Joitakin käytännön vinkkejä

 

   (( item.name ))
 

...ja näemme tällaisen virheen:

Voimme käsitellä sitä seuraavasti käyttämällä JSX:ää ja toiminnallista komponenttia, myös meidän pitäisi siirtää boolean ja se korvaa v-if.

</>

Älä kirjoita api-kutsujen käsittelijöitä komponentteihin.

Itse asiassa tämä on vain yksi esimerkki siitä, mitä ei pitäisi tehdä komponenteissa. Tee vain se, mikä on paikallisesti välttämätöntä komponenttien logiikassa. Kaikki metodit, jotka voivat olla ulkoisia, tulisi erottaa toisistaan ja kutsua vain komponenteissa, esim. liiketoimintalogiikassa.

Esimerkki:

Tällaisen menetelmän sijaan:

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

Kirjoita jotain tällaista - kutsu vain oikeaa menetelmää, joka palauttaa API-tulokset:

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

Käytä lähtö- ja saapumisaikoja suurten rekvisiittamäärien sijasta.

Joskus rekvisiitan käyttö riittää, mutta on myös tapauksia, joissa se ei ole tehokasta. Näin voi käydä tilanteissa, joissa joudumme lisäämään liikaa rekvisiittaa saadaksemme komponentin toimimaan haluamallamme tavalla. Yksinkertaisin esimerkki voisi olla painikekomponentti. Se on epäilemättä komponentti, jota voitaisiin käyttää missä tahansa sovelluksessa. Tarkastellaan siis tämän kaltaista painikekomponenttia.

(( teksti ))

Tässä vaiheessa se on yksinkertainen komponentti, joka hyväksyy vain tekstin. Se ei ehkä riitä, koska tarvitsemme painikkeeseen kuvakkeita. Tässä tapauksessa meidän on lisättävä vielä 2 muuta rekvisiittaa (2, koska haluamme valita, haluammeko lisätä ne ennen tai jälkeen tekstin). Komponentti näyttää siis tältä:

(( teksti ))

Se ei ole huono, meillä on vain 3 rekvisiittaa, mutta...

Entä jos tarvitsemme latausindikaattorin? No, meidän pitäisi lisätä toinen rekvisiitta. Ja tämä koskee jokaista uutta ominaisuutta! Kuulostaako komponenttien määrän kasvussa pysyminen nyt haastavalta? Kyllä, se on, ehdottomasti!

Käytetään sen sijaan lähtö- ja saapumisaikoja.

Eikö olekin yksinkertaisempaa? Okei, mutta miten saamme lisättyä kuvakkeen ominaisuuden? Se on todella helppoa! Käytä vain komponenttia näin:

Takaisin

Seuraava

Helppo tapa parantaa suorituskykyä

Jaan kanssasi vinkkejä, jotka on todella helppo toteuttaa, jotta voit heti hyötyä niistä.

Lazy load reitit

Joskus meillä on reittejä, jotka ovat saatavilla vain ylläpitäjille tai käyttäjille, joilla on tietyt käyttöoikeudet, ja niitä saatetaan myös käyttää vähemmän kuin muita. Ne ovat täydellisiä tapauksia laiskan latausreitin käyttämiseen.

Käytä vain nuolifunktiota komponenttiominaisuudessasi palauttaaksesi tuontifunktion:

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

Sen sijaan:

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

export default new VueRouter (
(
mode: 'history',
routes: [
(
path: '/landing',
component: PWelcome, //juuri tuotu komponentti
nimi: 'welcome'
),

Lazy loading Vue-komponentit

Samanlainen tilanne voi olla seuraavissa tapauksissa Vue-komponentit. Voimme tuoda yksittäisiä tiedostokomponentteja laiskasti näin:

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

// Toinen syntaksi
export default (
components: (
lazyComponent: () => import('pathToComponent.vue')
)
)

Kyseisen komponentin laiskan latauksen ansiosta se ladataan vasta, kun sitä pyydetään. Jos meillä on esimerkiksi komponentti, jossa on v-if, sitä pyydetään vain, jos komponentti on tarkoitus renderöidä. Joten ellei v-if-arvo ole true, komponenttia ei ladata. Siksi laiskaa tuontia voidaan käyttää myös seuraavissa tapauksissa JavaScript tiedostot.

Bonus: Kun käytät Vue CLI 3+ -ohjelmaa, jokainen laiskasti ladattu resurssi esitäytetään oletusarvoisesti!

Käytä läpinäkyviä kääreitä attribuuttirekvisiitan sijaan

Mieti esimerkiksi tällaista komponenttia:

Voimme käyttää sitä ongelmitta näin:

tai

Se toimii, koska Vue avulla voit välittää html-attribuutteja komponentille, vaikka et olisikaan ilmoittanut niitä rekvisiittana. Html-attribuutteja sovelletaan komponentin juurielementtiin (tässä tapauksessa input).

Ongelma ilmenee, kun haluamme laajentaa syöttökomponenttiamme, sillä se voi näyttää tältä:

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

Kun komponenttia käytetään tällä tavalla:

ei toimi halutulla tavalla, koska tyyppiä ja paikanhaltijaa sovelletaan div:iin (juurielementtiin), eikä siinä ole mitään järkeä. Meidän on siis käsiteltävä sitä, koska haluamme lisätä attribuutit input-elementtiin. Ensimmäinen ajatuksesi voi olla "lisätään tarvitsemamme rekvisiitta!", ja tietysti se toimii, mutta... entä jos haluamme käyttää tyyppi, automaattinen täydentäminen, paikanhaltija, automaattitarkennus, disabled, inputmode, jne., meidän on määriteltävä rekvisiitta jokaiselle html-attribuutille. Itse en pidä tästä pitkästä menetelmästä, joten etsitään jotain parempaa!

Voimme käsitellä koko ongelmaa vain kaksi riviä.

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

Voimme käyttää v-bind="$attrs" ja välittää attribuutit suoraan <input> ilmoittamatta valtavia määriä rekvisiittaa. Muista myös lisätä vaihtoehto inheritAttrs: false estääksesi attribuuttien välittämisen juurielementtiin. Mennään vielä hieman pidemmälle: entä jos haluamme lisätä tapahtumakuuntelijoita tähän syötteeseen? Jälleen kerran se voitaisiin hoitaa rekvisiittojen tai mukautettujen tapahtumien avulla, mutta on olemassa parempi ratkaisu.

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

On olemassa uusi laskennallinen ominaisuus, joka palauttaa kuuntelijoiden komponentin ja lisää syötteen kuuntelijan. Käytämme tuota laskettua syötettä yksinkertaisesti kirjoittamalla v-on="listeners".

Käytä vahtimella välitöntä vaihtoehtoa luodun koukun ja vahtimen sijasta yhdessä.

Haemme usein joitakin tietoja luodulla (tai asennetulla) koukulla, mutta sitten meidän on haettava nämä tiedot jokaisen ominaisuuden muutoksen yhteydessä, esimerkiksi sivumäärittelyn nykyisen sivun kohdalla. Joillakin on tapana kirjoittaa se näin:

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

Tietenkin se toimii, mutta... Se ei ole paras lähestymistapa, ei edes hyvä. Tarkistetaanpa siis, miten voimme muokata tätä, Esimerkki ei niin huonosta lähestymistavasta:

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

Yllä oleva versio on parempi, koska toista metodia ei tarvita, nimesimme vain metodin, jota on kutsuttava watchedProperty-ominaisuuden muuttamiseksi.

Vielä parempi lähestymistapa:

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

Pääsimme eroon luodusta koukusta. Lisäämällä vaihtoehdon 'immediate' teemme komponentin kutsun fetchData-metodiin heti havainnon alkamisen jälkeen (hieman ennen created-koukkua ja beforeCreated-koukun jälkeen), joten sitä voidaan käyttää created-koukun sijasta.

Vue.js vinkkien yhteenveto

Nämä vinkit eivät tee hakemuksestasi täydellistä, mutta niiden käyttäminen tekee siitä nopeasti parantaa koodin laatua. Toivon myös, että löydätte jotain kiinnostavaa edellä mainituista esimerkeistä.

Huomaa, että joitakin niistä on yksinkertaistettu artikkelin tarkoituksia varten.

Lue lisää:

JavaScript on täysin kuollut. Joku kaveri internetissä

Syvempi katsaus suosituimpiin React-koukkuihin

Ohjelmistoprojektit, joissa voit käyttää JavaScript:tä