Miglioramento dell'applicazione Vue.js. Alcuni consigli pratici

 

   (( item.name ))
 

...e vedremo un errore come questo:

Possiamo affrontarlo utilizzando JSX e un componente funzionale, inoltre dovremmo passare un booleano e questo sostituirà il v-if.

</>

Non scrivere gestori di chiamate api nei componenti

In realtà, questo è solo uno degli esempi di ciò che non si dovrebbe fare nei componenti. È sufficiente fare ciò che è localmente necessario nella logica dei componenti. Ogni metodo che potrebbe essere esterno dovrebbe essere separato e richiamato solo nei componenti, ad esempio nella logica aziendale.

Esempio:

Invece di un metodo come questo:

created() (
this.fetchArticles();
),
metodi: (
 async fetchArticles() (
  try (
    const data = await axios.get(url);
    this.articles = data.articles;
    ) catch (e) (
    // gestisce l'errore
    )
  )
)

Scrivete qualcosa di simile: basta chiamare il metodo appropriato che restituirà i risultati dell'API:

 async fetchArticles() (
   try (
     this.articles = await ArticlesService.fetchAll();
   ) catch (e) (
     // gestisce l'errore
   )
  )

Utilizzare slot invece di grandi quantità di oggetti di scena

A volte l'uso dei puntelli è sufficiente, ma ci sono anche casi in cui non sono efficienti. Può capitare di dover aggiungere troppi oggetti di scena per far funzionare il componente come vogliamo. L'esempio più semplice potrebbe essere quello di un componente pulsante. Senza dubbio, è un componente che può essere usato ovunque in un'applicazione. Consideriamo quindi un componente pulsante come questo.

(( testo ))

In questa fase, si tratta di un semplice componente che accetta solo prop di testo. Va bene, ma potrebbe non essere sufficiente, perché avremo bisogno di icone nel pulsante. In questo caso, dobbiamo aggiungere altri 2 oggetti di scena (2, perché vogliamo avere l'opzione di aggiungere prima o dopo il testo). Quindi, il componente avrà questo aspetto:

(( testo ))

Non è male, abbiamo solo 3 puntelli, ma...

E se avessimo bisogno di un indicatore di carico? Dovremmo aggiungere un altro oggetto. E questo per ogni nuova funzionalità! Tenere il passo con la crescita del numero di componenti è una sfida? Sì, decisamente sì!

Utilizziamo invece gli slot.

Più semplice, vero? Ok, ma come possiamo ottenere la funzione di aggiunta di icone? È molto semplice! Basta utilizzare il componente in questo modo:

Indietro

Avanti

Un modo semplice per migliorare le prestazioni

Condividerò con voi alcuni consigli davvero facili da mettere in pratica, in modo che possiate trarne immediatamente beneficio.

Percorsi a caricamento pigro

A volte le rotte sono disponibili solo per gli amministratori o per gli utenti con un accesso particolare e possono anche essere visitate meno di altre. Sono casi perfetti per l'uso del percorso di caricamento pigro.

È sufficiente utilizzare la funzione freccia nella proprietà del componente per restituire la funzione di importazione:

 export default new VueRouter (
   (
     modalità: 'storia',
     rotte: [
       (
         percorso: '/landing',
         component: () => import('../pages/p-welcome'),
         nome: 'benvenuto'
       ),
  ...

Invece di:

importare PWelcome da '@/pages/p-welcome';

esportazione predefinita nuovo VueRouter (
(
modalità: 'storia',
rotte: [
(
percorso: '/landing',
componente: PWelcome, //appena importato il componente
nome: 'welcome'
),

Caricamento pigro dei componenti Vue

Una situazione simile può verificarsi con Componenti Vue. Possiamo importare pigramente i componenti di un singolo file in questo modo:

const lazyComponent = () => import('pathToComponent.vue')
esportare l'impostazione predefinita (
componenti: (lazyComponent )
)

// Un'altra sintassi
Esportazione di default (
componenti: (
lazyComponent: () => import('pathToComponent.vue')
)
)

Grazie al caricamento pigro del componente, questo verrà scaricato solo quando richiesto. Ad esempio, se abbiamo un componente con v-if, questo verrà richiesto solo se il componente deve essere reso. Quindi, a meno che il valore v-if non sia vero, il componente non verrà caricato. Per questo motivo, l'importazione pigra può essere usata anche per JavaScript file.

Bonus: Quando si utilizza Vue CLI 3+, ogni risorsa caricata pigramente viene prefissata per impostazione predefinita!

Utilizzare wrapper trasparenti al posto dei puntelli degli attributi

Considerate un componente come questo:

Senza problemi, possiamo usarlo in questo modo:

o

Funziona, perché Vue consente di passare attributi html al componente, anche se non sono stati dichiarati come oggetti di scena. Gli attributi html vengono applicati all'elemento radice del componente (input, in questo caso).

Il problema si presenta quando si vuole espandere il componente di input, che potrebbe apparire come questo:

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

Ora, utilizzando il componente in questo modo:

non funzionerà come vogliamo, perché il tipo e il segnaposto saranno applicati a div (elemento radice) e questo non ha senso. Quindi, dobbiamo occuparcene, perché vogliamo aggiungere i nostri attributi all'elemento di input. Il primo pensiero potrebbe essere: "Aggiungiamo gli oggetti di scena di cui abbiamo bisogno!" e ovviamente funzionerà, ma... cosa succede se vogliamo usare tipo, completamento automatico, segnaposto, autofocus, disabilitato, modalità di ingressoecc., quindi dobbiamo definire gli oggetti di scena per ogni attributo html. Personalmente non mi piace questo metodo lungo, quindi cerchiamo qualcosa di meglio!

Possiamo affrontare l'intero problema in solo due righe.

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

Possiamo utilizzare v-bind="$attrs" e passare gli attributi direttamente a <input> senza dichiarare enormi quantità di oggetti di scena. Inoltre, ricordatevi di aggiungere l'opzione inheritAttrs: false per disabilitare il passaggio degli attributi all'elemento radice. Andiamo un po' più in là: e se avessimo bisogno di aggiungere degli ascoltatori di eventi a questo input? Anche in questo caso, potrebbe essere gestito da oggetti di scena o eventi personalizzati, ma c'è una soluzione migliore.

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

C'è una nuova proprietà calcolata che restituisce il componente per gli ascoltatori e aggiunge l'ascoltatore di input. Si utilizza l'input calcolato, scrivendo semplicemente v-on="ascoltatori".

Usare l'osservatore con l'opzione immediata invece del gancio e dell'osservatore creati insieme

Spesso si recuperano alcuni dati su un hook creato (o montato), ma poi occorre recuperare quei dati a ogni modifica di una proprietà, ad esempio la pagina corrente della paginazione. Alcuni tendono a scriverlo in questo modo:

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

Certo, funziona, ma... non è l'approccio migliore, nemmeno uno buono. Quindi, verifichiamo come possiamo rifattorizzare questo, un esempio di approccio non così cattivo:

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

La versione precedente è migliore perché non è necessario un altro metodo, ma solo un metodo che deve essere richiamato per modificare watchedProperty.

Un approccio ancora migliore:

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

Abbiamo eliminato il gancio created. Aggiungendo l'opzione 'immediate', facciamo in modo che il componente chiami il metodo fetchData subito dopo l'inizio dell'osservazione (un po' prima del gancio created e dopo beforeCreated), in modo da poterlo usare al posto del gancio created.

Sintesi dei suggerimenti Vue.js

Questi suggerimenti non renderanno la vostra applicazione perfetta, ma il loro utilizzo vi consentirà di migliorare la qualità del codice. Inoltre, spero che troverete qualcosa di interessante negli esempi precedenti.

Si noti che alcuni di essi sono stati semplificati ai fini dell'articolo.

Per saperne di più:

L'JavaScript è completamente morto. Un tizio su Internet

Uno sguardo più approfondito ai ganci React più popolari

Progetti software in cui è possibile utilizzare JavaScript