Almindelige fejl at undgå, når du arbejder med Vue.js

På udkig efter en frontend-ramme til at prøve, startede jeg med React og prøvede derefter Vue.js.

Desværre , jeg stødte på en masse problemer med Vue.js i begyndelsen. I denne artikel vil jeg gerne dele et par almindelige problemer, som du muligvis har at gøre med, når du arbejder med Vue.js. Nogle af disse problemer kan synes åbenlyse, men jeg regnede med at dele min oplevelse kan hjælpe nogen.

Inkluder skabeloncompiler

Mit første nummer var en ret grundlæggende. Den første ting at gøre for at bruge Vue.js er at importere det. Hvis du følger den officielle guide og bruger en integreret skabelon til din komponent, får du en tom side.

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

Bemærk, at dette problem ikke opstår, når du definerer skabeloner med gengivelsesfunktionen eller SFC (Single File Component).

Faktisk er der mange Vue-builds. Standardversionen, der eksporteres af NPM-pakken, er den kun runtime-build . Det bringer ikke skabelon-kompilatoren.

For nogle baggrundsoplysninger fungerer skabelonkompilatoren nøjagtigt som JSX for React. Det erstatter skabelonstrenge med funktionsopkald for at oprette en virtuel DOM-node.

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

Med SFC'er forekommer dette problem ikke. Både vue-loader og vueify er værktøjer, der bruges til at håndtere SFC'er. De genererer almindelige JavaScript-komponenter ved hjælp af gengivelsesfunktionen til at definere skabelonen.

For at bruge strengskabeloner i komponenter skal du bruge en komplet Vue.js-build.

Sammenfattende, for at løse dette problem skal du angive den korrekte build under importen eller oprette et alias for Vue i din bundler-konfiguration.

Du skal bemærke, at brug af strengskabeloner reducerer din apps ydeevne, fordi kompileringen sker ved kørsel.

Der er mange flere måder at definere en komponentskabelon på, så tjek denne artikel. Jeg anbefaler også at bruge gengivelsesfunktionen i Vue-instans.

Behold ejendommens reaktivitet

Hvis du bruger React, ved du sandsynligvis, at dens reaktivitet er afhængig af at kalde setStatefunktionen for at opdatere værdien af ​​egenskaber.

Reaktivitet med Vue.js er lidt anderledes. Det er baseret på proxying af komponentegenskaberne. Getter- og setterfunktioner tilsidesættes og underretter opdateringer til Virtual DOM.

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

I kodestykket ovenfor har Vue-forekomsten en egenskab kaldet item(defineret i data). Denne egenskab indeholder et tomt bogstaveligt objekt.

Under komponentinitialiseringen opretter Vue en proxy under getog setfunktionerne knyttet til itemejendommen. Således vil rammen se værdiforandringer og i sidste ende reagere.

Men countEjendommen er ikke reaktiv, fordi det ikke blev erklæret på initialisering tid.

Faktisk forekommer proxifying kun ved komponentinitialiseringstid, og beforeMountlivscyklusfunktionen udløses senere.

Desuden itemkaldes setteren ikke under countdefinitionen. Så proxyen udløses ikke, og countejendommen har intet ur.

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

Hvis du holder item.countpåvirkningen inde beforeMount, Vue.setopretter senere ikke et ur.

Det nøjagtige samme problem opstår også med arrays, når du bruger direkte hengivenhed på ukendte indekser. I sådanne tilfælde bør du foretrække array-proxified-funktioner som pushog slice.

Du kan også læse denne artikel fra Vue.js-udviklerens websted.

Vær forsigtig med SFC-eksport

Du kan bruge Vue regelmæssigt i JavaScript-filer, men du kan også bruge enkeltfilskomponenter. Det hjælper med at samle JavaScript, HTML og CSS-kode i en enkelt fil.

Med SFC'er er komponentkoden scriptets tag for en .vuefil. Stadig skrevet i JavaScript, skal den eksportere komponenten.

Der er mange måder at eksportere en variabel / komponent på. Ofte bruger vi enten direkte, navngivet eller standardeksport. Navngivet eksport forhindrer brugere i at omdøbe komponenten. Det vil også være berettiget til trærystning.

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

Brug af navngivne eksport er ikke kompatibel med SFC'er, vær opmærksom på dette!

Sammenfattende kan det være en god ide at eksportere en navngivet variabel som standard. På denne måde får du mere eksplicit fejlretningsbeskeder.

Bland ikke SFC-komponenter

At sætte kode, skabelon og stil sammen er en god idé. Desuden kan du, afhængigt af dine begrænsninger og meninger, måske bevare adskillelsen af ​​bekymringer.

Som beskrevet i Vue-dokumentationen er den kompatibel med SFC.

Bagefter kom en idé til mig. Brug den samme JavaScript-kode og inkluder den i forskellige skabeloner. Du kan pege på det som en dårlig praksis, men det holder tingene enkle.

For eksempel kan en komponent have både skrivebeskyttet og læse-skrive-tilstand og beholde den samme implementering.

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

I dette uddrag bruger både skrivebeskyttede og læs-skriv skabeloner den samme JavaScript-brugerkomponent.

Når du har importeret begge komponenter, finder du ud af, at det ikke fungerer som forventet.

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

Komponenten defineret iuser.jskan kun bruges i en enkelt SFC. Ellers tilsidesætter den sidst importerede SFC, der bruger den, den forrige.

SFC'er tillader opdeling af kode i separate filer. Men du kan ikke importere disse filer i flere Vue-komponenter.

For at gøre det enkelt skal du ikke genbruge JavaScript-komponentkoden i flere SFC-komponenter. Den separate kodefunktion er en praktisk syntaks, ikke et designmønster.

Tak for læsningen, håber, min erfaring har været nyttigt for at få dig til at undgå de fejl, jeg lavede.

Hvis det var nyttigt, skal du klikke på ? knap et par gange for at få andre til at finde artiklen og vise din støtte! ?

Glem ikke at følge mig for at få besked om mine kommende artikler ?

Tjek mine andre artikler

➥ JavaScript

  • Sådan forbedres dine JavaScript-færdigheder ved at skrive din egen webudviklingsramme?
  • Stop smertefuld JavaScript-fejlfinding og omfavn Intellij med kildekort

➥ Reagerer for begynderserier

  • Begynd med den første artikel
  • Få vejledningen om bedste praksis