Uobičajene pogreške koje treba izbjegavati tijekom rada s Vue.jsom

Programiranje

Tražeći front-end framework za isprobavanje, započeo sam s Reactom, a zatim isprobao Vue.js.

Nažalost , susreo sam se s puno problema s Vue.js-om na samom početku. U ovom članku želio bih podijeliti nekoliko uobičajenih problema s kojima ćete se možda morati suočiti prilikom rada s Vue.js. Neki od ovih problema mogu se činiti očitima, ali smatrao sam da bi dijeljenje mog iskustva nekome moglo pomoći.

Uključite kompajler predloška

Moje prvo izdanje bilo je prilično osnovno. Prvo što treba učiniti da biste koristili Vue.js jest uvoziti ga. Ako slijedite službeni vodič i koristite ugrađeni predložak za svoju komponentu, dobit ćete praznu stranicu.

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

Imajte na umu da se ovaj problem ne javlja kada definirate predloške s funkcijom prikaza ili SFC (komponenta jedne datoteke).

Zapravo, postoji mnogo Vue gradnji. Zadana gradnja koju izvozi NPM paket je izvedba samo za vrijeme izvođenja . Ne donosi kompajler predloška.

Za neke osnovne informacije, kompajler predložaka radi točno kao JSX za React. Zamjenjuje nizove predloška pozivima funkcija za stvaranje virtualnog DOM čvora.

// #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'); } });

Kod SFC-ova ovaj se problem ne pojavljuje. I vue-loader i vueify su alati koji se koriste za rukovanje SFC-ovima. Oni generiraju obične JavaScript komponente pomoću funkcije renderiranja za definiranje predloška.

Da biste koristili predloške nizova u komponentama, upotrijebite potpunu Vue.js verziju.

Ukratko, da biste riješili ovaj problem, navedite ispravnu izgradnju tijekom uvoza ili napravite pseudonim za Vue u svojoj konfiguraciji paketa.

Imajte na umu da upotreba predložaka nizova smanjuje izvedbu vaše aplikacije jer se kompilacija događa u vrijeme izvođenja.

Postoji mnogo više načina za definiranje predloška komponente, pa pogledajte ovaj članak. Također, preporučujem upotrebu funkcije renderiranja u instanci Vue.

Zadržite reaktivnost svojstva

Ako koristite React, vjerojatno znate da se njegova reaktivnost oslanja na pozivanje setStatefunkcije za ažuriranje vrijednosti svojstava.

Reaktivnost s Vue.js-om je malo drugačija. Temelji se na proksiranju svojstava komponente. Funkcije getera i postavljača bit će poništene i obavijestit će o ažuriranjima virtualnog DOM-a.

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++; } } });

U isječku koda gore, instanca Vue ima svojstvo pod nazivom item(definirano u podacima). Ovo svojstvo sadrži prazan doslovni objekt.

Tijekom inicijalizacije komponente, Vue stvara proxy ispod geti setfunkcije povezane s itemsvojstvom. Stoga će okvir promatrati promjene vrijednosti i na kraju reagirati.

Međutim, countsvojstvo nije reaktivno jer nije deklarirano u vrijeme inicijalizacije.

Zapravo, proksificiranje se događa samo u vrijeme inicijalizacije komponente, a beforeMountfunkcija životnog ciklusa aktivira se kasnije.

Osim toga, itempostavljač se ne poziva tijekom countdefinicije. Dakle, proxy neće aktivirati i countimovina neće imati sat.

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); }

Ako zadržite item.countafekciju beforeMount, pozivanje Vue.setkasnije neće stvoriti sat.

Točno isti problem javlja se i s nizovima kada se koristi izravna naklonost nepoznatim indeksima. U takvim biste slučajevima trebali preferirati niz proksificiranih funkcija kao što su pushi slice.

Također, ovaj članak možete pročitati na web mjestu razvojnog programera Vue.js.

Budite oprezni s izvozom SFC-a

Vue možete redovito koristiti u JavaScript datotekama, ali možete koristiti i komponente jedne datoteke. Pomaže u prikupljanju JavaScript, HTML i CSS koda u jednoj datoteci.

Kod SFC-ova kod komponente je oznaka skripte .vuedatoteke. I dalje napisan na JavaScript-u, komponentu mora izvesti.

Postoji mnogo načina za izvoz varijable / komponente. Često koristimo izravni, imenovani ili zadani izvoz. Imenovani izvoz spriječit će korisnike da preimenuju komponentu. Također će biti prihvatljivo za drmanje drveća.

/* 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)

Korištenje imenovanog izvoza nije kompatibilno sa SFC-ima, imajte na umu ovo!

Ukratko, izvoženje imenovane varijable prema zadanim postavkama moglo bi biti dobra ideja. Na ovaj način dobit ćete eksplicitnije poruke o otklanjanju pogrešaka.

Ne miješajte SFC komponente

Sastavljanje koda, predloška i stila dobra je ideja. Osim toga, ovisno o vašim ograničenjima i mišljenjima, možda ćete htjeti zadržati razdvojenost zabrinutosti.

Kao što je opisano u Vue dokumentaciji, kompatibilan je sa SFC-om.

Poslije mi je pala na pamet jedna ideja. Koristite isti JavaScript kôd i uključite ga u različite predloške. Možda ćete to istaknuti kao lošu praksu, ali stvari čine jednostavnim.

Na primjer, komponenta može imati način samo za čitanje i čitanje-pisanje i zadržati istu implementaciju.

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

U ovom isječku i predlošci samo za čitanje i za čitanje i pisanje koriste istu JavaScript korisničku komponentu.

Nakon što uvezete obje komponente, shvatit ćete da to ne radi kako se očekivalo.

// 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: ` ` });

Komponenta definirana uuser.jsmože se koristiti samo u jednom SFC-u. Inače, zadnji uvezeni SFC koji ga koristi poništit će prethodni.

SFC-ovi omogućuju razdvajanje koda u zasebnim datotekama. Ali ne možete uvesti datoteke thoses u više komponenti Vue.

Da biste to učinili jednostavnim, nemojte ponovno koristiti kôd JavaScript komponente u više SFC komponenata. Posebna značajka koda korisna je sintaksa, a ne obrazac dizajna.

Hvala na čitanju, nadam se da je moje iskustvo korisno kako biste izbjegli pogreške koje sam počinio.

Ako je bilo korisno, kliknite na ? gumb nekoliko puta da drugi nađu članak i pokažu vašu podršku! ?

Ne zaboravite me pratiti kako biste dobivali obavijesti o mojim predstojećim člancima ?

Pogledajte moje ostale članke

➥ JavaScript

  • How to Improve Your JavaScript Skills by Writing Your Own Web Development Framework ?
  • Stop Painful JavaScript Debug and Embrace Intellij with Source Map

➥ React for beginners series

  • Begin with the first article
  • Get the best practices guide