Vue er et raskt voksende progressivt rammeverk for å bygge brukergrensesnitt. Det ble det JavaScript-rammeverket med flest stjerner på GitHub og det mest stjernespekkede prosjektet i 2016 og 2017 på den samme portalen.
Creating applications in Vue er egentlig veldig enkelt, men hvis du ønsker å bygge applikasjoner av god kvalitet, må du regne med litt større utfordringer.
Å være en del av The Codestteam og en ekte forkjemper for Vue-teknologivil jeg dele noen tips (ikke kopiert fra offisielle Vue-dokumenter) som enkelt vil forbedre kode kvalitet og ytelsen til Vue-applikasjoner.
Der finner du fire Rule-kategorier. Vi bryr oss virkelig om tre av dem:
Viktig regler som hindrer oss i å gjøre feil,
Anbefales og anbefales på det sterkeste regler for å opprettholde beste praksis - for å forbedre kvaliteten og lesbarhet av koden.
Du tenker kanskje: "Hva?! Må jeg huske alle reglene?" Selvsagt ikke. Du kan bruke ESLint til å ta seg av disse reglene for deg. Du må bare angi alt på riktig måte i ESLint-konfigurasjonsfilen. Jeg foreslår at du bruker anbefales forhåndsinnstilt da du får et helt gratis sett med regler som hjelper deg med å bygge apper med god praksis. Hvordan setter du det opp?
Som standard bør du finne strekker seg tasten i ESLint-konfigurasjonen og erstatt "plugin:vue/essential" med "plugin:vue/anbefalt"...det er alt.
Det er selvfølgelig noen regler du bør huske på, fordi ESLint ikke kan håndtere alt på egen hånd. Det gjelder for eksempel
konsekvent navngivning,
navngivning av hendelser i kebab-sak,
prefiks $_navnerom_ private egenskaper i plugins, mixins osv,
enkelt filkomponent på øverste nivå elementrekkefølge.
Ikke bruk flere v-if
Noen ganger kan det være nødvendig å gjengi mer enn ett element betinget, men folk skriver ofte noe sånt:
innhold
innhold
innhold
Det er unødvendig fordi vi kan skrive det mer elegant:
Men hva om vi ønsker å gjøre det som et rotelement? I Vuekan vi ikke bruke <template> for dette formålet. I noen tilfeller kan det være nok å pakke inn i div.
Det er greit, men selv om vi ønsker det, kan vi noen ganger ikke pakke inn elementer i div, for eksempel på grunn av html-semantikken (f.eks.
Li
må være et direkte barn av
eller ). Så når vi må skrive:
(( element.navn ))
...og vi vil se en slik feil:
Vi kan håndtere det ved å ved hjelp av JSX og en funksjonell komponentbør vi også sende en boolsk, og den vil erstatte v-if.
</>
Ikke skriv api-anropsbehandlere i komponenter
Dette er faktisk bare ett av eksemplene på hva du ikke bør gjøre i komponenter. Bare gjør det som er lokalt nødvendig i komponentlogikken. Alle metoder som kan være eksterne, bør skilles ut og bare kalles i komponenter, f.eks. forretningslogikk.
Noen ganger er det akkurat nok å bruke props, men det finnes også tilfeller der de ikke er effektive. Det kan skje i situasjoner der vi må legge til for mange props for å få komponenten til å fungere slik vi ønsker. Det enkleste eksempelet kan være en knappkomponent. Det er uten tvil en komponent som kan brukes hvor som helst i en applikasjon. Så la oss se på en knappkomponent som denne.
(( tekst ))
På dette stadiet er det en enkel komponent som bare aksepterer tekstprop. Ok, men det er kanskje ikke nok ettersom vi trenger ikoner i knappen. I dette tilfellet må vi legge til ytterligere 2 rekvisitter (2, fordi vi ønsker å ha muligheten til å legge til før eller etter tekst). Så komponenten vil se slik ut:
(( tekst ))
Det er ikke så ille, vi har bare tre rekvisitter, men...
Hva om vi trenger en lasteindikator? Da må vi legge til enda en prop. Og det er for hver eneste nye funksjon! Høres det utfordrende ut å holde tritt med veksten i antall komponenter nå? Ja, det gjør det definitivt!
La oss bruke spilleautomater i stedet.
Enklere, ikke sant? Ok, men hvordan kan vi få funksjonen for å legge til ikoner? Det er veldig enkelt! Bare bruk komponenten slik:
Tilbake
Neste
Enkel måte å forbedre ytelsen på
Jeg vil dele noen tips med deg som er veldig enkle å implementere, slik at du kan dra nytte av dem umiddelbart.
Lazy load-ruter
Noen ganger har vi ruter som bare er tilgjengelige for administratorer, eller brukere med spesiell tilgang, og de kan også bli besøkt mindre enn andre. De er perfekte tilfeller for å bruke lazy load-ruten.
Bare bruk pilfunksjonen i komponentegenskapen din for å returnere importfunksjonen:
En lignende situasjon kan oppstå med Vue-komponenter. Vi kan importere enkeltkomponenter på denne måten:
const lazyComponent = () => import('pathToComponent.vue')
eksport standard (
komponenter: (lazyComponent )
)
// En annen syntaks
eksport standard (
komponenter: (
lazyComponent: () => import('pathToComponent.vue')
)
)
Takket være den dovne innlastingen av komponenten vil den bare lastes ned når den blir bedt om det. Hvis vi for eksempel har en komponent med v-if, vil den bare bli forespurt hvis komponenten skal gjengis. Så med mindre v-if-verdien er true, vil ikke komponenten bli lastet inn. Derfor kan lat import også brukes for JavaScript filer.
Bonus: Når du bruker Vue CLI 3+, blir alle ressurser som lastes inn på lazy loaded, forhåndshentet som standard!
Bruk gjennomsiktige wrappers i stedet for attributtprops
Tenk på en komponent som denne:
Uten problemer kan vi bruke den slik:
eller
Det fungerer, fordi Vue lar deg sende html-attributter til komponenten, selv om du ikke har deklarert dem som props. Html-attributtene brukes på komponentens rotelement (i dette tilfellet input).
Problemet oppstår når vi ønsker å utvide input-komponenten vår, siden den kan se slik ut:
vil ikke fungere som vi ønsker, fordi typen og plassholderen vil bli brukt på div (rotelementet), og det gir ingen mening. Så vi må gjøre noe med det, fordi vi ønsker å legge til attributtene våre i input-elementet. Din første tanke er kanskje "la oss legge til rekvisittene vi trenger!" og det vil selvfølgelig fungere, men ... hva om vi ønsker å bruke type, autofullfør, plassholder, autofokus, deaktivert, inputmodeosv., så må vi definere rekvisitter for hvert html-attributt. Personlig liker jeg ikke denne omstendelige metoden, så la oss se etter noe bedre!
Vi kan bruke v-bind="$attrs" og sende attributter direkte til <input> uten å deklarere store mengder rekvisitter. Husk også å legge til alternativet inheritAttrs: false for å deaktivere overføring av attributtene til rotelementet. La oss gå litt lenger: Hva om vi trenger å legge til hendelseslyttere til denne inngangen? Igjen, det kan håndteres av props eller egendefinerte hendelser, men det finnes en bedre løsning.
Det finnes en ny beregnet egenskap som returnerer komponenten for lyttere og legger til input-lytteren. Vi bruker den beregnede inndataen ved ganske enkelt å skrive v-on="lyttere".
Bruk watcher med immediate-alternativet i stedet for å opprette hook og watcher sammen
Vi henter ofte data på en opprettet (eller montert) krok, men så må vi hente disse dataene ved hver endring av en egenskap, f.eks. gjeldende side i en paginering. Noen har en tendens til å skrive det ned slik:
Det fungerer selvfølgelig, men... Det er ikke den beste tilnærmingen, ikke engang en god en. Så la oss se hvordan vi kan refaktorere dette, et eksempel på en ikke så dårlig tilnærming:
Versjonen ovenfor er bedre fordi det ikke er nødvendig med en annen metode, vi har bare navngitt en metode som skal kalles på for å endre watchedProperty.
Vi har kvittet oss med created-kroken. Ved å legge til alternativet "immediate" gjør vi at komponenten kaller på fetchData-metoden umiddelbart etter starten av observasjonen (det er litt før created-kroken og etter beforeCreated), slik at den kan brukes i stedet for created-kroken.
Vue.js tips sammendrag
Disse tipsene vil ikke gjøre søknaden din perfekt, men ved å bruke dem vil du raskt forbedre kvaliteten på koden din. Jeg håper også at du vil finne noe av interesse i eksemplene ovenfor.
Merk at noen av dem er forenklet for artikkelens formål.