Βελτίωση της εφαρμογής Vue.js. Μερικές πρακτικές συμβουλές

 

   (( item.name ))
 

...και θα δούμε ένα τέτοιο σφάλμα :

Μπορούμε να το αντιμετωπίσουμε με χρησιμοποιώντας JSX και ένα λειτουργικό στοιχείο, επίσης θα πρέπει να περάσουμε ένα boolean και αυτό θα αντικαταστήσει το v-if.

Μην γράφετε χειριστές κλήσεων api σε συστατικά

Στην πραγματικότητα, αυτό είναι μόνο ένα από τα παραδείγματα του τι δεν πρέπει να κάνετε στα συστατικά. Απλώς κάντε ό,τι είναι τοπικά απαραίτητο στη λογική των συστατικών. Κάθε μέθοδος που θα μπορούσε να είναι εξωτερική θα πρέπει να διαχωρίζεται και να καλείται μόνο σε συστατικά π.χ. επιχειρησιακή λογική.

Παράδειγμα:

Αντί για μια μέθοδο όπως αυτή:

created() (
this.fetchArticles(),
),
μέθοδοι: (
 async fetchArticles() (
  try (
    const data = await axios.get(url),
    this.articles = data.articles,
    ) catch (e) (
    // χειρισμός σφάλματος
    )
  )
)

Γράψτε κάτι τέτοιο - απλά καλέστε την κατάλληλη μέθοδο που θα επιστρέψει τα αποτελέσματα του API:

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

Χρησιμοποιήστε κουλοχέρηδες αντί για μεγάλες ποσότητες στηριγμάτων

Μερικές φορές η χρήση στηριγμάτων είναι αρκετή, αλλά υπάρχουν και περιπτώσεις που δεν είναι αποτελεσματικές. Αυτό μπορεί να συμβεί σε περιπτώσεις όπου θα πρέπει να προσθέσουμε πάρα πολλά στηρίγματα για να κάνουμε το στοιχείο να λειτουργήσει όπως θέλουμε. Το απλούστερο παράδειγμα θα μπορούσε να είναι ένα συστατικό κουμπί. Χωρίς καμία αμφιβολία, είναι ένα συστατικό που θα μπορούσε να χρησιμοποιηθεί οπουδήποτε σε μια εφαρμογή. Ας εξετάσουμε λοιπόν ένα συστατικό κουμπιού όπως αυτό εδώ.

(( κείμενο ))

Σε αυτό το στάδιο, πρόκειται για ένα απλό στοιχείο που δέχεται μόνο κείμενο. Εντάξει, αλλά μπορεί να μην είναι αρκετό καθώς θα χρειαστούμε εικονίδια στο κουμπί. Σε αυτή την περίπτωση, πρέπει να προσθέσουμε άλλα 2 props (2, επειδή θέλουμε να έχουμε τη δυνατότητα να προσθέσουμε πριν ή μετά το κείμενο). Έτσι, το συστατικό θα μοιάζει με αυτό:

(( κείμενο ))

Δεν είναι κακό, έχουμε μόνο 3 στηρίγματα, αλλά...

Τι γίνεται αν χρειαζόμαστε έναν δείκτη φόρτωσης; Λοιπόν, θα πρέπει να προσθέσουμε άλλο ένα στήριγμα. Και αυτό ισχύει για κάθε νέο χαρακτηριστικό! Σας ακούγεται προκλητικό τώρα να συμβαδίζετε με την αύξηση του αριθμού των εξαρτημάτων; Ναι, ακούγεται, σίγουρα!

Ας χρησιμοποιήσουμε αντ' αυτού τις υποδοχές.

Απλούστερο, σωστά; Εντάξει, αλλά πώς μπορούμε να αποκτήσουμε τη δυνατότητα προσθήκης εικονιδίων; Είναι πραγματικά εύκολο! Απλά χρησιμοποιήστε το στοιχείο ως εξής:

Πίσω

Επόμενο

Εύκολος τρόπος βελτίωσης της απόδοσης

Θα μοιραστώ μαζί σας μερικές συμβουλές που είναι πραγματικά εύκολο να εφαρμοστούν, ώστε να μπορείτε να επωφεληθείτε άμεσα.

Lazy διαδρομές φόρτωσης

Μερικές φορές έχουμε διαδρομές που είναι διαθέσιμες μόνο για τους διαχειριστές ή για χρήστες με συγκεκριμένη πρόσβαση, τις οποίες μπορεί επίσης να επισκέπτονται λιγότεροι από άλλους. Είναι ιδανικές περιπτώσεις για τη χρήση της διαδρομής lazy load.

Απλά χρησιμοποιήστε τη συνάρτηση βέλους στην ιδιότητα του συστατικού σας για να επιστρέψετε τη συνάρτηση εισαγωγής:

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

Αντί για:

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

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

Τεμπέλικη φόρτωση εξαρτημάτων Vue

Μια παρόμοια κατάσταση μπορεί να συμβεί με Εξαρτήματα Vue. Μπορούμε να εισάγουμε νωχελικά συστατικά ενός αρχείου όπως αυτό:

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

// Άλλη σύνταξη
export default (
components: (
lazyComponent: () => import('pathToComponent.vue')
)
)

Χάρη στο lazy load αυτού του στοιχείου, θα κατεβαίνει μόνο όταν ζητηθεί. Για παράδειγμα, αν έχουμε ένα συστατικό με v-if, θα ζητηθεί μόνο αν το συστατικό πρόκειται να αναπαραχθεί. Έτσι, αν η τιμή v-if δεν είναι αληθής, το συστατικό δεν θα φορτωθεί. Αυτός είναι ο λόγος για τον οποίο το lazy importing μπορεί επίσης να χρησιμοποιηθεί για JavaScript αρχεία.

Μπόνους: Όταν χρησιμοποιείτε το Vue CLI 3+, κάθε χαλαρά φορτωμένος πόρος προεπιλέγεται από προεπιλογή!

Χρήση διαφανών περιτυλίξεων αντί για attribute props

Σκεφτείτε ένα εξάρτημα όπως αυτό:

Χωρίς προβλήματα, μπορούμε να το χρησιμοποιήσουμε ως εξής:

ή

Λειτουργεί, διότι Vue σας επιτρέπει να μεταφέρετε χαρακτηριστικά html στο στοιχείο, ακόμη και αν δεν τα έχετε δηλώσει ως στηρίγματα. Τα χαρακτηριστικά html εφαρμόζονται στο στοιχείο ρίζα του συστατικού (input, στην προκειμένη περίπτωση).

Το πρόβλημα εμφανίζεται όταν θέλουμε να επεκτείνουμε το συστατικό εισόδου μας, καθώς θα μπορούσε να μοιάζει με αυτό:

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

Τώρα, χρησιμοποιώντας το συστατικό με αυτόν τον τρόπο:

δεν θα λειτουργήσει όπως θέλουμε, επειδή ο τύπος και ο placeholder θα εφαρμοστούν στο div (root element) και αυτό δεν έχει νόημα. Έτσι, πρέπει να το αντιμετωπίσουμε, επειδή θέλουμε να προσθέσουμε τα χαρακτηριστικά μας στο στοιχείο εισόδου. Η πρώτη σας σκέψη μπορεί να είναι "ας προσθέσουμε τα στηρίγματα που χρειαζόμαστε!" και φυσικά αυτό θα λειτουργήσει, αλλά... τι γίνεται αν θέλουμε να χρησιμοποιήσουμε το τύπος, αυτόματη συμπλήρωση, placeholder, αυτόματη εστίαση, disabled, inputmode, κ.λπ., τότε πρέπει να ορίσουμε τα props για κάθε html attribute. Προσωπικά δεν μου αρέσει αυτή η χρονοβόρα μέθοδος, οπότε ας ψάξουμε για κάτι καλύτερο!

Μπορούμε να ασχοληθούμε με το όλο πρόβλημα σε μόνο δύο γραμμές.

<template>
  <div class="form-group">
    <label :for="id">(( ετικέτα ))</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>

Μπορούμε να χρησιμοποιήσουμε v-bind="$attrs" και να περνάτε τα χαρακτηριστικά απευθείας στο χωρίς να δηλώνετε τεράστια ποσά στηριγμάτων. Επίσης, θυμηθείτε την προσθήκη της επιλογής inheritAttrs: false για να απενεργοποιήσετε τη μεταβίβαση των χαρακτηριστικών στο στοιχείο ρίζα. Ας προχωρήσουμε λίγο παραπέρα: τι γίνεται αν χρειαστεί να προσθέσουμε ακροατές συμβάντων σε αυτή την είσοδο; Και πάλι, αυτό θα μπορούσε να αντιμετωπιστεί με props ή προσαρμοσμένα συμβάντα, αλλά υπάρχει μια καλύτερη λύση.

<template>
  <div class="form-group">
    <label :for="id">(( ετικέτα ))</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>

Υπάρχει μια νέα υπολογισμένη ιδιότητα που επιστρέφει το στοιχείο για ακροατές και προσθέτει τον ακροατή εισόδου. Χρησιμοποιούμε αυτή την υπολογισμένη είσοδο γράφοντας απλά v-on="listeners".

Χρησιμοποιήστε τον παρατηρητή με την επιλογή immediate αντί του δημιουργημένου γάντζου και του παρατηρητή μαζί

Συχνά φέρνουμε κάποια δεδομένα σε ένα δημιουργημένο (ή τοποθετημένο) άγκιστρο, αλλά στη συνέχεια πρέπει να φέρνουμε αυτά τα δεδομένα με κάθε αλλαγή μιας ιδιότητας, π.χ. την τρέχουσα σελίδα της σελιδοποίησης. Κάποιοι τείνουν να το γράφουν ως εξής:

Φυσικά, λειτουργεί, αλλά... Δεν είναι η καλύτερη προσέγγιση, ούτε καν η καλύτερη. Έτσι, ας ελέγξουμε πώς μπορούμε να το αναδιαμορφώσουμε, Ένα παράδειγμα μιας όχι και τόσο κακής προσέγγισης:

Η παραπάνω εκδοχή είναι καλύτερη, επειδή δεν είναι απαραίτητη άλλη μέθοδος, αλλά ονομάσαμε μόνο μια μέθοδο που πρέπει να κληθεί για να αλλάξει το watchedProperty.

Μια ακόμη καλύτερη προσέγγιση:

Ξεφορτωθήκαμε το δημιουργημένο άγκιστρο. Προσθέτοντας την επιλογή 'immediate', κάνουμε αυτή την κλήση του συστατικού στη μέθοδο fetchData αμέσως μετά την έναρξη της παρατήρησης (είναι λίγο πριν από το άγκιστρο created και μετά το beforeCreated), ώστε να μπορεί να χρησιμοποιηθεί αντί για το άγκιστρο created.

Vue.js σύνοψη συμβουλών

Αυτές οι συμβουλές δεν θα κάνουν την αίτησή σας τέλεια, αλλά η χρήση τους θα κάνει γρήγορα να βελτιώσετε την ποιότητα του κώδικά σας. Επίσης, ελπίζω ότι θα βρείτε κάτι ενδιαφέρον στα παραπάνω παραδείγματα.

Σημειώστε ότι ορισμένα από αυτά απλοποιήθηκαν για τους σκοπούς του άρθρου.

Διαβάστε περισσότερα:

Το JavaScript είναι εντελώς νεκρό. Κάποιος τύπος στο Διαδίκτυο

Μια βαθύτερη ματιά στα πιο δημοφιλή άγκιστρα React

Έργα λογισμικού όπου μπορείτε να χρησιμοποιήσετε το JavaScript