Συνηθισμένα λάθη που πρέπει να αποφεύγετε ενώ εργάζεστε με το Vue.js

Αναζητώντας ένα πλαίσιο front-end για να το δοκιμάσω, ξεκίνησα με το React και μετά δοκίμασα το Vue.js.

Δυστυχώς , αντιμετώπισα πολλά προβλήματα με το Vue.js στην αρχή. Σε αυτό το άρθρο, θα ήθελα να μοιραστώ μερικά κοινά ζητήματα που ίσως χρειαστεί να αντιμετωπίσετε όταν εργάζεστε με το Vue.js. Μερικά από αυτά τα ζητήματα μπορεί να φαίνονται προφανή, αλλά κατάλαβα ότι η κοινή χρήση της εμπειρίας μου μπορεί να βοηθήσει κάποιον.

Συμπερίληψη μεταγλωττιστή προτύπου

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

import Vue from 'vue'; var vm = new Vue({ el: '#vm', template: ' Hello World ', });

Σημειώστε ότι αυτό το ζήτημα δεν παρουσιάζεται όταν ορίζετε πρότυπα με τη λειτουργία απόδοσης ή το SFC (Single File Component).

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

Για ορισμένες πληροφορίες παρασκηνίου, ο μεταγλωττιστής προτύπων λειτουργεί ακριβώς όπως το JSX για το React. Αντικαθιστά τις συμβολοσειρές προτύπων με κλήσεις λειτουργιών για τη δημιουργία ενός κόμβου εικονικού DOM.

// #1: import full build in JavaScript file import Vue from 'vue/dist/vue.js'; // OR #2: make an alias in webpack configuration config.resolve: { alias: { vue: 'vue/dist/vue.js' } } // OR #3: use render function directly var vm = new Vue({ el: '#vm', render: function(createElement) { return createElement('div', 'Hello world'); } });

Με τα SFC, αυτό το ζήτημα δεν παρουσιάζεται. Τόσο το vue-loader όσο και το vueify είναι εργαλεία που χρησιμοποιούνται για τη διαχείριση των SFC. Δημιουργεί απλά στοιχεία JavaScript χρησιμοποιώντας τη λειτουργία απόδοσης για τον καθορισμό του προτύπου.

Για να χρησιμοποιήσετε πρότυπα συμβολοσειράς σε στοιχεία, χρησιμοποιήστε μια πλήρη έκδοση Vue.js.

Συνοπτικά, για να διορθώσετε αυτό το ζήτημα, καθορίστε τη σωστή έκδοση κατά την εισαγωγή ή δημιουργήστε ένα ψευδώνυμο για το Vue στη διαμόρφωση του bundler

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

Υπάρχουν πολλοί περισσότεροι τρόποι για να ορίσετε ένα πρότυπο στοιχείου, οπότε δείτε αυτό το άρθρο. Επίσης, προτείνω τη χρήση της λειτουργίας απόδοσης στην παρουσία Vue.

Διατηρήστε την αντιδραστικότητα της ιδιοκτησίας

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

Η αντιδραστικότητα με το Vue.js είναι λίγο διαφορετική. Βασίζεται στη μεσολάβηση των ιδιοτήτων των συστατικών. Οι λειτουργίες λήψης και ρύθμισης θα παρακαμφθούν και θα ειδοποιήσουν ενημερώσεις για το εικονικό DOM.

var vm = new Vue({ el: '#vm', template: ` {{ item.count }} `, data: { item: {} }, beforeMount () { this.$data.item.count = 0; }, methods: { updateCount () { // JavaScript object is updated but // the component template is not rendered again this.$data.item.count++; } } });

Στο απόσπασμα κώδικα παραπάνω, η παρουσία Vue έχει μια ιδιότητα που ονομάζεται item(ορίζεται στα δεδομένα). Αυτή η ιδιότητα περιέχει ένα κενό κυριολεκτικό αντικείμενο.

Κατά τη διάρκεια της προετοιμασίας συστατικό, Vue δημιουργεί ένα πληρεξούσιο σύμφωνα με τους getκαι setτις λειτουργίες που συνδέονται με την itemιδιοκτησία. Έτσι, το πλαίσιο θα παρακολουθεί τις αλλαγές τιμών και τελικά θα αντιδράσει.

Ωστόσο, η countιδιότητα δεν είναι αντιδραστική, επειδή δεν δηλώθηκε κατά την έναρξη.

Στην πραγματικότητα, η proxifying εμφανίζεται μόνο κατά τον χρόνο προετοιμασίας των στοιχείων και η beforeMountλειτουργία κύκλου ζωής ενεργοποιείται αργότερα.

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

beforeMount () { // #1: Call parent setter // item setter is called so proxifying is propaged this.$data.item = { count: 0 }; // OR #2: explicitly ask for watching // item.count got its getter and setter proxyfied this.$set(this.$data.item, 'count', 0); // "Short-hand" for: Vue.set(this.$data.item, 'count', 0); }

Εάν διατηρήσετε την item.countαγάπη beforeMount, η κλήση Vue.setαργότερα δεν θα δημιουργήσει ρολόι.

Το ίδιο ακριβώς πρόβλημα εμφανίζεται επίσης με πίνακες όταν χρησιμοποιείτε άμεση αγάπη σε άγνωστα ευρετήρια. Σε τέτοιες περιπτώσεις, θα πρέπει να προτιμάτε συναρτήσεις proxifyed array όπως pushκαι slice.

Επίσης, μπορείτε να διαβάσετε αυτό το άρθρο από τον ιστότοπο του Vue.js Developer.

Να είστε προσεκτικοί με τις εξαγωγές SFC

Μπορείτε να χρησιμοποιείτε τακτικά το Vue σε αρχεία JavaScript, αλλά μπορείτε επίσης να χρησιμοποιήσετε μεμονωμένα στοιχεία αρχείων. Βοηθά στη συλλογή κώδικα JavaScript, HTML και CSS σε ένα μόνο αρχείο.

Με τα SFC, ο κωδικός συστατικού στοιχείου είναι η ετικέτα σεναρίου ενός .vueαρχείου. Ακόμα γραμμένο σε JavaScript, πρέπει να εξάγει το στοιχείο.

Υπάρχουν πολλοί τρόποι εξαγωγής μιας μεταβλητής / στοιχείου. Συχνά, χρησιμοποιούμε άμεσες, ονομαστικές ή προεπιλεγμένες εξαγωγές. Οι εξαγόμενες εξαγωγές δεν θα επιτρέψουν στους χρήστες να μετονομάσουν το στοιχείο. Θα είναι επίσης επιλέξιμο για κούνημα δέντρων.

/* File: user.vue */ {{ user.name }} const User = { data: () => ({ user: { name: 'John Doe' } }) }; export User; // Not work export default User; // Works  /* File: app.js */ import {User} from 'user.vue'; // Not work import User from 'user.vue'; // Works (".vue" is required)

Using named exports is not compatible with SFCs, be mindful about this!

In summary, exporting a named variable by default might be a good idea. This way, you will get more explicit debug messages.

Don’t mix SFC components

Putting code, template, and style together is a good idea. Besides, depending on your constraints and opinions, you may want to keep the separation of concerns.

As described in the Vue documentation, it’s compatible with SFC.

Afterward, one idea came to my mind. Use the same JavaScript code and include it in different templates. You may point it as a bad practice, but it keeps things simple.

For instance, a component can have both read-only and read-write mode and keep the same implementation.

/* File: user.js */ const User = { data: () => ({ user: { name: 'John Doe' } }) }; export default User; /* File: user-read-only.vue */ {{ user.name }} /* File: user-read-write.vue */  

In this snippet, both read-only and read-write templates use the same JavaScript user component.

Μόλις εισαγάγετε και τα δύο στοιχεία, θα καταλάβετε ότι δεν λειτουργεί όπως αναμένεται.

// The last import wins import UserReadWrite from './user-read-write.vue'; import UserReadOnly from './user-read-only.vue'; Vue.component('UserReadOnly', UserReadOnly); Vue.component('UserReadWrite', UserReadWrite); // Renders two times a UserReadOnly var vm = new Vue({ el: '#vm', template: ` ` });

Το στοιχείο που ορίζεται στοuser.jsμπορεί να χρησιμοποιηθεί μόνο σε ένα SFC. Διαφορετικά, το τελευταίο εισαγόμενο SFC που το χρησιμοποιεί θα αντικαταστήσει το προηγούμενο.

Τα SFC επιτρέπουν τον διαχωρισμό κώδικα σε ξεχωριστά αρχεία. Αλλά δεν μπορείτε να εισαγάγετε αυτά τα αρχεία σε πολλά στοιχεία του Vue.

Για να το καταστήσετε απλό, μην επαναχρησιμοποιείτε τον κωδικό στοιχείου JavaScript σε πολλά στοιχεία SFC. Το ξεχωριστό χαρακτηριστικό κώδικα είναι μια εύχρηστη σύνταξη, όχι ένα σχέδιο σχεδίασης.

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

Εάν ήταν χρήσιμο, κάντε κλικ στο ? κουμπί μερικές φορές για να κάνουν τους άλλους να βρουν το άρθρο και να δείξουν την υποστήριξή σας! ;

Μην ξεχάσετε να με ακολουθήσετε για να λαμβάνω ειδοποιήσεις για τα επερχόμενα άρθρα μου ;

Δείτε τα Άλλα άρθρα μου

➥ JavaScript

  • Πώς να βελτιώσετε τις δεξιότητες JavaScript γράφοντας το δικό σας Πλαίσιο Ανάπτυξης Ιστού;
  • Σταματήστε τον επίπονο εντοπισμό σφαλμάτων JavaScript και αγκαλιάστε το Intellij με τον χάρτη πηγής

➥ Αντιδράστε για σειρά αρχάριων

  • Ξεκινήστε με το πρώτο άρθρο
  • Λάβετε τον οδηγό βέλτιστων πρακτικών