Yleisiä virheitä, joita on vältettävä työskenneltäessä Vue.js: n kanssa

Etsitkö käyttöliittymäkehystä kokeilemista varten, aloitin Reactin kanssa ja sitten Vue.js: n kanssa.

Valitettavasti , kohtasin paljon ongelmia Vue.js aivan alussa. Tässä artikkelissa haluaisin jakaa muutaman yleisen ongelman, joita sinun on ehkä käsiteltävä työskennellessäsi Vue.js: n kanssa. Jotkut näistä asioista saattavat vaikuttaa ilmeisiltä, ​​mutta ajattelin, että kokemukseni jakaminen voi auttaa jotakuta.

Sisällytä mallin kääntäjä

Ensimmäinen numeroni oli melko perusasia. Ensimmäinen tehtävä Vue.js: n käyttämiseksi on tuoda se. Jos noudatat virallista opasta ja käytät komponenttisi sisäistä mallia, saat tyhjän sivun.

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

Huomaa, että tätä ongelmaa ei ilmene, kun määrität malleja renderöintitoiminnolla tai SFC: llä (yhden tiedoston komponentti).

Itse asiassa Vue-versioita on monia. NPM-paketin viemä oletusrakenne on vain ajonaikainen koontiversio . Se ei tuo mallin kääntäjää.

Joitakin taustatietoja varten mallin kääntäjä toimii täsmälleen kuten JSX for React. Se korvaa mallijonot funktiokutsuilla luomaan virtuaalisen DOM-solmun.

// #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: llä tätä ongelmaa ei esiinny. Sekä vue-loader että vueify ovat työkaluja, joita käytetään SFC: n käsittelemiseen. Ne luovat tavalliset JavaScripti-komponentit käyttämällä render-toimintoa mallin määrittelemiseen.

Jos haluat käyttää merkkijonomalleja komponenteissa, käytä täydellistä Vue.js-koontiversiota.

Yhteenvetona voidaan todeta, että voit korjata tämän ongelman määrittämällä oikean koontiversion tuonnin aikana tai tekemällä aliaksen Vue: lle nipun kokoonpanossa.

Huomaa, että merkkijonomallien käyttö vähentää sovelluksesi suorituskykyä, koska kokoaminen tapahtuu ajon aikana.

Komponenttimallin määrittelemiseen on monia muita tapoja, joten tutustu tähän artikkeliin. Suosittelen myös renderöintitoiminnon käyttöä Vue-ilmentymässä.

Säilytä kiinteistön reaktiivisuus

Jos käytät React-ohjelmaa, tiedät todennäköisesti, että sen reaktiivisuus riippuu setStatefunktion kutsumisesta ominaisuuksien arvon päivittämiseksi.

Reaktiivisuus Vue.js: n kanssa on vähän erilainen. Se perustuu komponentin ominaisuuksien välitykseen. Getter- ja setter-toiminnot ohitetaan ja ne ilmoittavat päivityksistä Virtual DOM: iin.

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

Yllä olevassa koodinpätkässä Vue-ilmentymällä on ominaisuus nimeltä item(määritelty tiedoissa). Tämä ominaisuus sisältää tyhjän kirjaimellisen objektin.

Aikana komponentti alustuksen, Vue muodostaa välipalvelinnaapuriluettelon mukaisesti getja settoiminnot kiinnitetty itemomaisuutta. Siten kehys seuraa arvomuutoksia ja reagoi lopulta.

Kuitenkin countomaisuus ei ole reaktiivinen, koska se ei ole ilmoitettu alustuksen aikana.

Itse asiassa proksifikaatio tapahtuu vain komponenttien alustushetkellä, ja beforeMountelinkaaritoiminto käynnistyy myöhemmin.

Sitä paitsi itemasettaja ei kutsuta aikana countmääritelmää. Joten välityspalvelin ei laukaise ja countomaisuudella ei ole kelloa.

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

Jos pidät item.countvaikutelman beforeMount, soittaminen Vue.setmyöhemmin ei luo kelloa.

Aivan sama ongelma esiintyy myös matriisien kanssa, kun käytetään suoraa kiintymystä tuntemattomiin hakemistoihin. Tällaisissa tapauksissa kannattaa mieluummin matriisin proksifioituja toimintoja, kuten pushja slice.

Voit myös lukea tämän artikkelin Vue.js-kehittäjän verkkosivustolta.

Ole varovainen SFC-viennin suhteen

Voit käyttää Vue-ohjelmaa säännöllisesti JavaScript-tiedostoissa, mutta voit myös käyttää yksittäisen tiedoston komponentteja. Se auttaa keräämään JavaScript-, HTML- ja CSS-koodin yhteen tiedostoon.

SFC: n kanssa komponenttikoodi on .vuetiedoston komentotunniste . Edelleen kirjoitettuna JavaScript-muodossa, sen on vietävä komponentti.

Muuttujaa / komponenttia voi viedä monella tapaa. Usein käytämme joko suoraa, nimettyä tai oletusvientiä. Nimetty vienti estää käyttäjiä nimeämästä komponenttia uudelleen. Se voidaan myös ravistaa puita.

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

Nimettyjen vientien käyttäminen ei ole yhteensopivaa SFC: n kanssa, ole tietoinen tästä!

Yhteenvetona voidaan sanoa, että nimetyn muuttujan vieminen oletuksena voi olla hyvä idea. Näin saat tarkempia virheenkorjausviestejä.

Älä sekoita SFC-komponentteja

Koodin, mallin ja tyylin yhdistäminen on hyvä idea. Lisäksi voit rajoitteidesi ja mielipiteidesi mukaan pitää huolta toisistaan.

Kuten Vue-ohjeissa kuvataan, se on yhteensopiva SFC: n kanssa.

Jälkeenpäin mieleeni tuli yksi idea. Käytä samaa JavaScript-koodia ja sisällytä se eri malleihin. Voit sanoa sen huonoksi käytännöksi, mutta se pitää asiat yksinkertaisina.

Esimerkiksi komponentilla voi olla sekä luku- että kirjoitus-tila ja säilyttää sama toteutus.

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

Tässä koodinpätkässä sekä luku että kirjoitus-mallit käyttävät samaa JavaScript-käyttäjän komponenttia.

Kun olet tuonut molemmat komponentit, huomaat, että se ei toimi odotetulla tavalla.

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

Kohdassa määritelty komponenttiuser.jsvoidaan käyttää vain yhdessä SFC: ssä. Muuten viimeksi käytetty SFC, joka käyttää sitä, korvaa edellisen.

SFC: t sallivat koodin jakamisen erillisissä tiedostoissa. Mutta et voi tuoda näitä tiedostoja useissa Vue-komponenteissa.

Yksinkertaisuuden vuoksi älä käytä JavaScript-komponenttikoodia uudelleen useissa SFC-komponenteissa. Erillinen koodiominaisuus on kätevä syntakse, ei suunnittelumalli.

Kiitos lukemisesta, toivottavasti kokemuksestani on ollut hyötyä, jotta voin välttää tekemäni virheet.

Jos se oli hyödyllinen, napsauta ? -painiketta muutaman kerran, jotta muut löytävät artikkelin ja osoittavat tukesi! ?

Älä unohda seurata minua saadaksesi ilmoituksen tulevista artikkeleistani ?

Tutustu muihin artikkeleihini

➥ JavaScript

  • Kuinka parantaa JavaScript-taitojasi kirjoittamalla oma web-kehys?
  • Lopeta tuskallinen JavaScript-virheenkorjaus ja käsittele Intellij lähdekartalla

➥ Reagoi aloittelijoille -sarjaan

  • Aloita ensimmäisestä artikkelista
  • Hanki parhaiden käytäntöjen opas