A Vue.js használatakor elkerülendő gyakori hibák

Keresek egy front-end keretrendszert, amelyet kipróbálhatok, a React-lel kezdtem, majd a Vue.js-t próbáltam ki.

Sajnos , találkoztam egy csomó problémák Vue.js legelején. Ebben a cikkben szeretnék megosztani néhány gyakori problémát, amelyekkel a Vue.js-sel való együttműködés során lehet, hogy foglalkoznia kell. Néhány ilyen kérdés nyilvánvalónak tűnhet, de arra gondoltam, hogy tapasztalataim megosztása segíthet valakinek.

Tartalmazza a sablonfordítót

Az első kiadásom elég alapos volt. Az első tennivaló a Vue.js használatához az, hogy importálja. Ha betartja a hivatalos útmutatót, és beépített sablont használ az alkatrészéhez, akkor egy üres oldalt kap.

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

Vegye figyelembe, hogy ez a probléma nem fordul elő, ha sablonokat ad meg a renderelés funkcióval vagy az SFC (Single File Component) funkcióval.

Valójában sok Vue épít. Az NPM csomag által exportált alapértelmezett build a csak futásidejű build . Nem hozza meg a sablonfordítót.

Néhány háttérinformációért a sablonfordító pontosan úgy működik, mint a JSX a React számára. Virtuális DOM csomópont létrehozásához a sablonhúrokat funkcióhívásokkal helyettesíti.

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

Az SFC-knél ez a probléma nem fordul elő. A vue-loader és a vueify is az SFC- k kezelésére szolgáló eszköz. Egyszerű JavaScript-összetevőket generálnak a render függvény segítségével a sablon meghatározásához.

Ha karaktersorozatsablonokat szeretne használni az összetevőkben, használja a teljes Vue.js buildet.

Összefoglalva: a probléma megoldásához adja meg a helyes összeállítást az importálás során, vagy hozzon létre egy fedőnevet a Vue számára a kötegelt konfigurációban.

Ne feledje, hogy a karakterlánc-sablonok használata csökkenti az alkalmazás teljesítményét, mert a fordítás futás közben történik.

Még sok más módszer létezik egy összetevő sablon meghatározásához, ezért nézze meg ezt a cikket. Továbbá javasoljuk a render funkció használatát a Vue példányban.

Tartsa meg az ingatlan reaktivitását

Ha a React szolgáltatást használja, akkor valószínűleg tudja, hogy a reakcióképessége a setStatefüggvény meghívására támaszkodik a tulajdonságok értékének frissítéséhez.

A Vue.js-rel való reakcióképesség kissé eltér. Ez a komponens tulajdonságainak proxyn alapul. A Getter és a Setter funkciókat felülbírálják, és értesítik a Virtual DOM frissítéseiről.

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

A fenti kódrészletben a Vue példánynak van egy item(adatban definiált) tulajdonsága. Ez a tulajdonság egy üres szó szerinti objektumot tartalmaz.

Az alkatrész inicializálása során a Vue létrehoz egy proxyt a tulajdonsághoz csatolt getés setfunkciók alatt item. Így a keret figyelni fogja az értékváltozásokat, és végül reagálni fog.

A counttulajdonság azonban nem reaktív, mert az inicializáláskor nem volt deklarálva.

Valójában a proxifikálás csak az alkatrész inicializálásakor történik, és az beforeMountéletciklus függvény később vált ki.

Ezenkívül a itemszetter nem kerül countmeghatározásra. Tehát a proxy nem vált ki, és az countingatlannak nincs órája.

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

Ha az item.countérintettséget bent tartja, a későbbi beforeMounthívás Vue.setnem hoz létre órát.

Pontosan ugyanaz a probléma merül fel a tömböknél is, amikor ismeretlen indexeken közvetlen vonzást használnak. Ilyen esetekben előnyben kell részesítenie a tömb által közelített függvényeket, például a pushés slice.

Ezenkívül elolvashatja ezt a cikket a Vue.js Developer webhelyéről.

Vigyázzon az SFC exportjával

A Vue programot rendszeresen használhatja a JavaScript fájlokban, de használhatja az Egyetlen fájl összetevőket is. Segít összegyűjteni a JavaScript, HTML és CSS kódokat egyetlen fájlban.

SFC-k esetén az összetevő kód egy .vuefájl szkript címkéje . Még mindig JavaScript-ben írva kell exportálnia az összetevőt.

A változó / komponens exportálásának számos módja van. Gyakran közvetlen, megnevezett vagy alapértelmezett exportot használunk. A megnevezett export megakadályozza a felhasználókat az összetevő átnevezésében. Ez is jogosult lesz a fa rázására.

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

A megnevezett export használata nem kompatibilis az SFC-kkel, ügyeljen erre!

Összefoglalva: jó lehet egy megnevezett változó alapértelmezett exportálása. Így kifejezettebb hibakeresési üzeneteket kap.

Ne keverje az SFC-összetevőket

A kód, a sablon és a stílus összerakása jó ötlet. Ezenkívül korlátozásaitól és véleményeitől függően érdemes megtartani az aggodalmak elválasztását.

A Vue dokumentációjában leírtak szerint kompatibilis az SFC-vel.

Utána eszembe jutott egy ötlet. Használja ugyanazt a JavaScript kódot, és foglalja bele különböző sablonokba. Lehet, hogy rossz gyakorlatnak nevezi, de ez egyszerűsíti a dolgokat.

Például egy komponensnek csak olvasható és írási módja lehet, és ugyanazt a megvalósítást tartja fenn.

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

Ebben a részletben az írásvédett és az írási sablonok egyaránt ugyanazt a JavaScript felhasználói összetevőt használják.

Miután mindkét komponenst importálta, rájön, hogy nem a várt módon működik.

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

A komponens meghatározásauser.jscsak egyetlen SFC-ben használható. Ellenkező esetben az utoljára importált SFC, amely használja, felülírja az előzőt.

Az SFC-k lehetővé teszik a kód felosztását külön fájlokban. De nem importálhatja ezeket a fájlokat több Vue-összetevőbe.

Az egyszerűség kedvéért ne használjon több JavaScript-összetevő kódot több SFC-összetevőben. A különálló kódfunkció praktikus szintaxis, nem tervezési minta.

Köszönöm, hogy elolvastad, remélem, tapasztalatom hasznos volt ahhoz, hogy elkerüld az elkövetett hibákat.

Ha hasznos volt, kattintson a ? gombot néhányszor, hogy mások megtalálják a cikket, és megmutassák támogatását! ?

Ne felejtsen el követni, hogy értesítést kapjak a következő cikkeimről ?

Nézze meg a többi cikkemet

➥ 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