Čomu sa vyhnúť vo VueJS a čo robiť lepšie?

Vue.js je nielen jednoduché na naučenie, ale aj napriek veľmi kvalitnej dokumentácii, je jednoduché robiť chyby, alebo sa naučiť riešiť niektoré problémy neoptimálnym spôsobom. Budeme sa venovať niekoľkým z nich.

Statické hodnoty v data/computed

Premenné, ktoré sú statické, a teda sa nebudú meniť, nemajú čo robiť v data alebo v computed. Vue by ich zbytočne spravilo reaktívne. Takéto premenné môžeme zadefinovať priamo v komponente a potom k nim pristupovať cez this.$options.variableName.

Očakávanie, že nereaktívne dáta budú reaktívne

Najlepším príkladom na toto sú cookies (pomocou knižnice JS-Cookie).

Na prvý pohľad vyzerá kód v poriadku. Ale ak zmeníme hodnotu cookies cez Cookies.set('jwt', 'qwerty-12345'), tak to fungovať nebude. Vue zmenu hodnoty v cookie nezachytí. Preto aktualizujte premenné manuálne cez metódu.

Nesprávne používanie setTimeout/setInterval

Ak sa z nejakého dôvodu rozhodnete používať setTimeout alebo setInterval, tak nezabudnite pri inicializácii daný interval/timeout uložiť do premennej a potom hlavne nezabudnite odstrániť interval/timeout pred odstránením inštancie komponenty.

Ak by ste zabudli na odstránenie intervalu v beforeDestroy životnom cykle komponenty, tak by ste v konzole videli krásny error.

Nesprávne používanie externých ne-Vue knižníc

Podobne ako pri setTimeout/setInterval, aj pri používaní externých knižníc netreba zabudnúť na ich "zničenie" v beforeDestroy. Väčšina externých knižníc by mala mať destroy metódu. Ako príklad použijeme Flatpickr.

Ak by sme to nespravili, tak by nám časom hrozili "úniky pamäte" (memory leaky). Veľmi dobre sa tomu venuje Vue.js dokumentácia.

Vue.radšej-nie-set

Vue reaktívny systém je fajn, ale zatiaľ nevie pokryť všetky možné prípady. Bude to vyriešené v novej verzii (3.0), ktorá bude podporovať ES2015 Proxies. Tie ale nie sú podporované v Internet Exploreri. Pre ten bude mať Vue zvlášť verziu bez ES2015 Proxies. Vue teda nezaregistruje zmeny v týchto prípadoch:

  • Ak sú do objektu pridané (alebo odstránené) nové parametre/vlastnosti, použite Vue.set(object, 'parameter', value), alebo Vue.delete v prípade odstránenia. Ak chcete pridať parametre, tak použite Object.assign({}, object, { a: 1, b: 2 }), alebo { ...object, ...{ a: 1, b: 2 }}.
  • ak sa ručne zmení hodnota length v array, používajte splice alebo push.
  • ak sa hodnota v poli zmení priamo cez index, napr. array[index] = value, dá sa to obísť cez Vue.set(array, index, value).

Používať Vue.set nie je úplne zlé, ale nie je to ani úplne správne. Mali by ste sa snažiť vyhnúť tomu, aby ste pre polia používali splice/push a pre objekty mať štruktúru definovanú vopred.

v-for bez unikátnych keys

Oficiálna dokumentácia odporúča používať unikátny key (napr. ID objektu) vždy, keď sa to dá. Okrem situácie, keď je iterovaný obsah veľmi jednoduchý. V takých prípadoch sa stačí spoľahnúť na štandardnú internú Vue metódu (in-place patch strategy). Pri používaní v-for nezabudnite na zadefinovanie unikátneho key parametru. Bez toho Vue nevie, ktorý objekt sa zmenil a veľmi ľahko sa tak stretnete s vizuálnymi bugmi (zmena niečoho sa vám buď nezobrazí, alebo sa vám zobrazí úplne inde). Ak ale používate v-for na komponente, tak key je požadovaný.

Mutovanie rodičovského komponentu

Vue.js síce umožňuje dostať sa k parametrom rodičovskej/nadradenej komponenty cez parameter $parent a takýmto spôsobom je možné editovať, ale nerobte to. Ak sa pokúsite meniť hodnotu props, tak vás Vue na to upozorní. Ibaže pri úprave props cez parenta vás Vue na to neupozorní.

Ďalšie odporúčané čítanie

Na prichádzajúce jarné večery odporúčam na prečítanie oficiálny Vue.js Style Guide a Vue.js Cookbook.

Zatiaľ čo style guide vás naučí lepšie písať Vue.js kód a stručne vás oboznámi s povinnými pravidlami, poradím vám oboznámiť sa len s odporúčanými. Cookbook je zbierka "receptov", teda každá sekcia rieši samostatnú vec, resp. problém a venuje sa problematike viac do hĺbky než style guide.