Vue.js app verbeteren. Enkele praktische tips

 

   (( item.naam ))
 

...en dan zien we zo'n foutmelding:

We kunnen het aanpakken door met behulp van JSX en een functioneel componentOok moeten we een boolean doorgeven en het zal de v-if vervangen.

</>

Schrijf geen api call handlers in componenten

Eigenlijk is dit slechts een van de voorbeelden van wat je niet moet doen in componenten. Doe gewoon wat lokaal nodig is in componentenlogica. Elke methode die extern zou kunnen zijn, moet worden gescheiden en alleen worden aangeroepen in componenten, bijvoorbeeld bedrijfslogica.

Voorbeeld:

In plaats van een methode als deze:

aangemaakt() (
this.fetchArticles();
),
methoden: (
 async fetchArticles() (
  proberen (
    const data = await axios.get(url);
    this.articles = data.articles;
    ) catch (e) (
    // fout afhandelen
    )
  )
)

Schrijf zoiets als dit - roep gewoon de juiste methode aan die API-resultaten teruggeeft:

 async fetchArticles() (
   proberen (
     this.articles = await ArticlesService.fetchAll();
   ) catch (e) (
     // fout afhandelen
   )
  )

Gebruik gleuven in plaats van grote hoeveelheden rekwisieten

Soms is het gebruik van props net genoeg, maar er zijn ook gevallen waarin ze niet efficiënt zijn. Dit kan gebeuren in situaties waar we te veel props moeten toevoegen om het component te laten werken zoals we willen. Het eenvoudigste voorbeeld is een knopcomponent. Het is ongetwijfeld een component dat overal in een toepassing kan worden gebruikt. Laten we dus eens kijken naar een knopcomponent zoals deze.

(( tekst ))

In dit stadium is het een eenvoudig component dat alleen tekstvoorstellen accepteert. Oké, maar het is misschien niet genoeg omdat we pictogrammen nodig hebben in de knop. In dat geval moeten we nog eens 2 props toevoegen (2, omdat we de optie willen hebben om voor of na tekst toe te voegen). Het component ziet er dan zo uit:

(( tekst ))

Het is niet slecht, we hebben maar 3 rekwisieten, maar...

Wat als we een laadindicator nodig hebben? Dan moeten we nog een prop toevoegen. En dat voor elke nieuwe functie! Klinkt het nu uitdagend om de groei van het aantal onderdelen bij te houden? Ja, dat doet het zeker!

Laten we in plaats daarvan slots gebruiken.

Eenvoudiger, toch? Oké, maar hoe krijgen we de functie pictogram toevoegen? Dat is heel eenvoudig! Gebruik de component gewoon op deze manier:

Terug

Volgende

Eenvoudige manier om prestaties te verbeteren

Ik zal een aantal tips met je delen die heel gemakkelijk te implementeren zijn, zodat je er direct van kunt profiteren.

Lazy load routes

Soms hebben we routes die alleen beschikbaar zijn voor admins, of gebruikers met bepaalde toegang, ze kunnen ook minder bezocht worden dan andere. Dit zijn perfecte gevallen om de lazy load route te gebruiken.

Gebruik gewoon de pijlfunctie in je componenteigenschap om de importeerfunctie te retourneren:

 export standaard nieuwe VueRouter (
   (
     modus: 'geschiedenis
     routes: [
       (
         pad: '/landing',
         component: () => import('../pages/p-welcome'),
         naam: 'welkom
       ),
  ...

In plaats van:

importeer PWelcome uit '@/pages/p-welcome';

export standaard nieuwe VueRouter (
(
modus: 'history',
routes: [
(
pad: "/landing",
component: PWelcome, //juist geïmporteerd component
naam: 'welkom
),

Lui laden van Vue componenten

Een vergelijkbare situatie kan zich voordoen met Vue onderdelen. We kunnen componenten uit één bestand op deze manier lui importeren:

const lazyComponent = () => import('pathToComponent.vue')
export standaard (
componenten: (lazyComponent )
)

// Een andere syntaxis
export standaard (
componenten: (
lazyComponent: () => import('pathToComponent.vue')
)
)

Dankzij de lazy load van dat component, wordt het alleen gedownload als het wordt opgevraagd. Als we bijvoorbeeld een component hebben met v-if, zal die alleen worden opgevraagd als de component moet renderen. Dus tenzij de v-if waarde waar is, wordt de component niet geladen. Daarom kan lui importeren ook worden gebruikt voor JavaScript bestanden.

Bonus: Wanneer je Vue CLI 3+ gebruikt, wordt elke lazy loaded bron standaard geprefetched!

Gebruik transparante wrappers in plaats van attribuutprops

Overweeg een component als deze:

Zonder problemen kunnen we het als volgt gebruiken:

of

Het werkt, omdat Vue laat je toe html attributen door te geven aan de component, zelfs als je ze niet als props hebt gedeclareerd. De html-attributen worden toegepast op het basiselement van de component (in dit geval input).

Het probleem verschijnt wanneer we onze invoercomponent willen uitbreiden, omdat deze er als volgt uit zou kunnen zien:

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

Gebruik de component nu op deze manier:

zal niet werken zoals we willen, omdat het type en de placeholder zullen worden toegepast op div (basiselement) en dat heeft geen zin. We moeten er dus iets aan doen, want we willen onze attributen toevoegen aan het invoerelement. Je eerste gedachte is misschien "laten we de attributen toevoegen die we nodig hebben!" en natuurlijk werkt dat, maar... wat als we het volgende willen gebruiken type, autoaanvullen, placeholder, autofocus, uitgeschakeld, ingangsmodusenz., dan moeten we de props definiëren voor elk html attribuut. Persoonlijk houd ik niet van deze lange methode, dus laten we op zoek gaan naar iets beters!

We kunnen het hele probleem behandelen in slechts twee regels.

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

We kunnen v-bind="$attrs" en attributen direct doorgeven aan <input> zonder enorme hoeveelheden rekwisieten te declareren. Denk ook aan het toevoegen van de optie inheritAttrs: false om het doorgeven van de attributen aan het rootelement uit te schakelen. Laten we nog iets verder gaan: wat als we event listeners moeten toevoegen aan deze invoer? Nogmaals, dit zou kunnen worden afgehandeld door props of aangepaste gebeurtenissen, maar er is een betere oplossing.

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

Er is een nieuwe berekende eigenschap die de component voor luisteraars retourneert en de invoerluisteraar toevoegt. We gebruiken die berekende invoer door simpelweg het volgende te schrijven v-on="luisteraars.

Gebruik watcher met de optie onmiddellijk in plaats van de aangemaakte haak en watcher samen

We halen vaak gegevens op bij een aangemaakte (of gemounte) hook, maar dan moeten we die gegevens ophalen bij elke verandering van een eigenschap, bijvoorbeeld de huidige pagina van de paginering. Sommigen hebben de neiging om het als volgt op te schrijven:

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

Natuurlijk werkt het, maar... Het is niet de beste aanpak, zelfs geen goede. Dus laten we eens kijken hoe we dit kunnen herformuleren, Een voorbeeld van een niet zo slechte benadering:

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

De bovenstaande versie is beter omdat een andere methode niet nodig is, we hebben alleen een methode benoemd die moet worden aangeroepen om de watchedProperty te wijzigen.

Een nog betere aanpak:

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

We hebben de created hook verwijderd. Door de optie 'immediate' toe te voegen, laten we die component de fetchData methode direct na de start van de observatie aanroepen (het is iets voor de created hook en na beforeCreated), zodat het gebruikt kan worden in plaats van de created hook.

Vue.js tips samenvatting

Deze tips zullen je sollicitatie niet perfect maken, maar als je ze gebruikt, zal dat wel snel gebeuren de kwaliteit van je code verbeteren. Ik hoop dat je iets interessants zult vinden in de bovenstaande voorbeelden.

Merk op dat sommige vereenvoudigd zijn voor dit artikel.

Lees meer:

JavaScript is helemaal dood. Een kerel op het internet

Een diepere blik op de populairste React haken

Software projecten waar je JavaScript kunt gebruiken