Vue.js ako jeden z moderných JavaScript frameworkov získava na čoraz väčšej popularite, predovšetkým pri vytváraní SPA (Single Page Application). To, ako ľahko sa dokáže užívateľ naučiť princípy Vue.js, patrí k jeho nesporným výhodám. Naše oddelenie vývoja si preto pripravilo niekoľko tipov, ktoré vám prácu s týmto frameworkom zjednodušia ešte viac.
1. Viacslovné názvy komponentov
Názvy komponentov by mali vždy obsahovať viac slov (okrem koreňového App.vue). Takto predídeme konfliktom pri použití už existujúcich HTML elementov, ktoré sú vždy jednoslovné.
Zle:
Dobre:
2. Komponent data
Pri použití funkcie data v komponente by to mala byť funkcia vracajúca objekt.
Je to z toho dôvodu, že data je zdieľané vo všetkých inštanciách komponentu, ktorý môžeme použiť viackrát. Tým môže vzniknúť problém, pretože každá inštancia komponentu odkazuje na rovnaký dátový objekt a zmenou hodnoty jednej premennej sa zmení aj hodnota v ostatných inštanciách.
Zabránime tomu práve tým, že data bude vracať objekt a teda každá inštancia bude vracať jedinečný objekt.
Zle:
Dobre:
3. Definícia props
Definícia props (properties) komponentu by mala byť čo najviac detailná. Minimálne by mala obsahovať aspoň typ. Zároveň to má dve výhody:
1. Dokumentovanie API komponentu, takže je ľahšie pochopiť, ako sa komponent používa.
2. Pri vývoji bude Vue varovať, ak props budú v nesprávnom formáte, čím sa môžeme vyhnúť potenciálnym chybám.
Zle:
Dobre:
4. Lokálne štýlovanie v komponentoch
Pri vyvíjaní veľkého projektu alebo pri práci s inými vývojármi môže nastať problém, že si v niektorom komponente prepíšeme CSS. Aby sme sa tomu vyhli, je dobré použiť parameter scoped, čo spôsobí, že každý daný komponent bude mať len lokálne CSS a nebude sa vzťahovať ku zvyšnému CSS v projekte.
5. Používať router
Pri akomkoľvek prepínaní stránky alebo len view je dobré používať router a vyhnúť sa zobrazovaniu elementov pomocou v-if a v-show. Týmto zabránime prípadným budúcim problémom a tiež si zjednodušíme prácu so zdieľaním dát medzi komponentami. Router môžeme použiť ako element v HTML:
alebo priamo v JavaScripte:
Pri zadaní parametra prenáša dáta k danej ceste (path) a ak by sme chceli zmeniť len konkrétne view a nie celú stránku, umožňuje si zadefinovať children routre.
6. Použitie rôznych routrov s rovnakým komponentom
S touto situáciou sa vývojári bežne stretávajú, keď používame routre s rôznymi cestami ale rovnakým komponentom. Problém nastáva preto, že Vue optimalizuje aplikáciu a použije už existujúci komponent namiesto toho, aby vytvoril nový. Ak sa teda pokúsime prepínať medzi routrami, ktoré používajú rovnaký komponent, nič sa nezmení.
Aby sme to vyriešili, musíme pridať atribút :key do elementu <router-view>. Následne router dokáže rozpoznať, že je stránka odlišná.
7. Počúvanie lifecycle eventov z child componentu
Vo Vue Lifecycle eventy sú pomerne potrebné a niekedy sa môže stať, že potrebujeme použiť práve tie z child komponentu. Aby sme sa vyhli zbytočným vlastným eventom umiestneným napríklad v mounted(), môžeme jednoducho použiť v-atribút @hook.
8. Použiť immediate: true na aktiváciu watch pri inicializácii
Môžeme prísť do štádia, kedy nám už computed nestačí a potrebujeme použiť watch. Lenže tiež môžeme natrafiť na celkom zvyčajný problém, že pri inicializácií komponentu watch nie je ešte aktívny. Watch je takto normálne prednastavený, to však dokážeme zmeniť, ak ho prevedieme na objekt a pridáme mu atribút immediate: true.
9. Konvencie komponentov
Poznáme dve konvencie, ktoré môžeme použiť na zapísanie komponentov.
PascalCase
kebab-case
Avšak v projekte musí byť použitá len jedna z nich a nie kombinácia oboch, kvôli prehľadnosti kódu.
PascalCase má výhodu, že podporuje autocomplete a vo väčšine vývojárskych prostredí je odlišne sfarbený od ostatných HTML elementov. Avšak názvy súborov so zmiešanými veľkosťami písmen môžu niekedy spôsobovať problémy v súborových systémoch, ktoré nerozlišujú veľké a malé písmená – pre takéto prípady je preto lepšie použiť kebab-case.
10. Pri eventoch používať kebab-case
Pri vysielaní vlastných eventov je vždy najlepšie použiť konvenciu kebab-case. Dôvodom je, že v nadradenom komponente je rovnaká syntax, akú používame na počúvanie tejto udalosti. Aby bol v kóde súlad a tiež aby bol čitateľnejší, používame kebab-case na oboch miestach.
11. Deklarácia props camelCase, použitie kebab-case
Tento osvedčený postup sa jednoducho riadi konvenciami pre každý jazyk. V JavaScripte je štandardom camelCase a v HTML zase kebab-case. Keďže Vue automatický prevádza props medzi camelCase a kebab-case, nemusíme sa starať o nič iné, len o ich deklaráciu.
12. Používať computed premenné
Vo Vue sú často využívané computed premenné. V prvom rade, môžeme predísť použitiu v-if a v-for v jednom elemente a tým urýchliť vykresľovanie, keďže sa nemusí prejsť cez všetky predmety vo for cykle. Computedpremenná je znova vyhodnotená iba vtedy, keď sa zmení jej závislosť a pomáha oddeliť logiku komponentu od šablóny, vďaka čomu je náš komponent viac čitateľnejší.
Zle:
Dobre:
Zhrnutie
Veríme, že ste si našli tipy, ako zjednodušiť a zefektívniť vašu prácu s týmto populárnym frameworkom. Ak ale hľadáte špecialistov, ktorí by vám pomohli s vývojom softvéru, možno aj práve s pomocou Vue.js, kontaktuje nás a naši developeri sa postarajú o zrealizovanie vášho projektu od A do Z.
