Metoder, Beregnet, og Overvåkere i Vue.js

0
46

En av grunnene til at jeg elsker å jobbe med Vue er på grunn av hvor nyttige metoder, beregnet, og overvåkere er, og leseligheten av sitt særpreg. Til å forstå alle tre, det er vanskelig å utnytte funksjonaliteten i Vue til sitt fulle potensial. Likevel, de fleste mennesker jeg ser forvirret om dette rammeverket har en tendens til også å bli forvirret om forskjellene her, så la oss grave litt i.

I tilfelle du trenger en rask svar og ikke har tid til å lese gjennom hele artikkelen, her er en liten TL;DR:

  • Metoder: Dette er nøyaktig hva de høres ut som de kan være (yay, navngi!). De er funksjoner som henger ut av et objekt—vanligvis Vue eksempel seg selv eller en Vue komponent.
  • Beregnet: Disse egenskapene kan ved første ser ut som de vil bli brukt som en metode, men som ikke er det. I Vue, vi bruker data til å spore endringer til en bestemt eiendel som vi ønsker å være reaktiv. Beregnede egenskaper tillate oss å definere en eiendom som brukes på samme måte som data, men kan også ha noen tilpassede logikk som er bufret, basert på dens avhengigheter. Du kan vurdere beregnede egenskaper annen visning inn dine data.
  • Observatører: Disse tillater deg et glimt inn i den reaktivitet system. Vi er tilbudt noen kroker med å observere noen egenskaper som er lagret ved Vue. Hvis vi ønsker å legge til en bit av funksjonalitet hver gang noe endres, eller svare på en bestemt endring, kunne vi se en eiendel og bruke noen logikk. Dette betyr at navnet på watcher har å matche det vi prøver å observere.

Hvis noe av dette høres forvirrende ut, trenger du ikke å bekymre deg! Vi vil dykke ned i videre nedenfor og forhåpentligvis ta noen forvirring. Hvis du er kjent med vanilje JavaScript allerede, metodene kan være ganske tydelig for deg, bortsett fra en eller to begrensninger. Det kan da behoove deg (jeg elsker det uttrykket) for å hoppe til den Beregnede og Overvåkere seksjoner.

Metoder

Metodene er sannsynlig noe du kommer til å bruke mye mens du arbeider med Vue. De er treffende navnet som, i hovedsak, vi henger en funksjon av et objekt. De er utrolig nyttig for å koble til funksjonalitet for å direktiver for hendelser, eller bare lage en liten bit av logikk for å bli gjenbrukt som enhver annen funksjon. Du kan kalle en metode i en annen metode, for eksempel. Du kan også ringe en metode inne i en livssyklus kroken. De er veldig allsidige.

Her er en enkel demo for å demonstrere:

Se Pen Slank eksempel på metoder av Sarah Drasner (@sdras) på CodePen.

<code class=”språk-css”><div id=”app”>
<- knapp @klikk=”tryme”>Prøv Meg</button>
<p>{{ message }}</p>
</div>
nye Vue({
el: ‘#app’,
data() {
tilbake {
melding: null
}
},
metoder: {
tryme() {
dette.melding = Date()
}
}
})

Vi kunne også ha utført logikken i direktivet i seg selv som < – knapp @klikk=”message = Date()”>Prøv Meg</button>, som fungerer veldig bra for dette lite eksempel. Imidlertid, ettersom kompleksiteten av søknaden vår vokser, er det mer vanlig å gjøre som vi ser over til å bryte det ut til å holde det leselig. Det er også en grense for den logikken som Vue vil tillate deg å uttrykke i et direktiv for eksempel uttrykk er tillatt, men uttalelsene er ikke.

Du legger kanskje merke til at vi vil være i stand til å få tilgang til denne metoden innenfor denne komponenten eller Vue eksempel, og vi kan ringe til hvilken som helst del av våre data her, i dette tilfellet, dette.melding. Du trenger ikke å kalle en metode som du vil kalle en funksjon i et direktiv. For eksempel, @klikk=”methodName()” er unødvendig. Du kan sjekke det med @klikk=”methodName”, med mindre du trenger å passere en parameter, for eksempel @klikk=”methodName(param)”.

Ved hjelp av direktiver for å kalle metoder er også fint fordi vi har noen av de eksisterende modifikatorer. Ett eksempel som er veldig nyttig .hindre, som vil holde en send-event fra omlasting siden, brukt som dette:

<form v-på:send.forhindre=”onSubmit”></form>

Det er mange flere, her er noen av dem.

Beregnet

Beregnede egenskaper er svært verdifull for å manipulere data som allerede eksisterer. Når du bygger noe der du trenger for å sortere gjennom en stor gruppe av data, og du ikke ønsker å kjøre disse beregningene på at hvert tastetrykk, tenker å bruke en beregnet verdi.

Noen gode kandidater inkluderer, men er ikke begrenset til:

  • Oppdatering av en stor mengde informasjon, mens en bruker er å skrive, for eksempel filtrering en liste
  • Innhenting av informasjon fra din Vuex butikk
  • Form validering
  • Data effekter som endrer seg avhengig av hva brukeren trenger å se

Beregnede egenskaper er en viktig del av Vue å forstå. De beregninger som skal hurtigbufres, basert på deres avhengigheter, og vil bare oppdatere ved behov. De er svært effektivt når det brukes godt og svært nyttig. Det er mange store biblioteker som håndterer denne typen logikk som du kan nå fjerne med bare noen få linjer med kode.

Beregnede egenskaper ikke blir brukt som metoder, men ved første, de kan se like ut – du sier noen logikk i en funksjon og tilbake – men det navn av at funksjonen blir en eiendom som du vil deretter kan du bruke i din søknad som data.

Hvis vi trengte å filtrere en stor liste med navn på helter basert på hva brukeren var å skrive, her er hvordan vi ville gjøre det. Vi skal holde dette veldig enkelt, så du kan få den base konsepter ned. Opprinnelig vår liste ville ut i vår mal ved hjelp av navn, som vi lagrer i data:

nye Vue({
el: ‘#app’,
data() {
tilbake {
navn: [
‘Evan Du’,
‘John Lindquist’,
‘Jen Looper’,
‘Miriam Suzanne’,

]
}
}
})
<div id=”app”>
<h1>Helter</h1>
<ul>
<li v-=”navn i navn”>
{{ navn }}
</li>
</ul>
</div>

La oss nå lage et filter for dem navn. Vi vil begynne med å lage en inngang med v-modell som skal opprinnelig være en tom streng, men vi skal til slutt bruke til å matche og filtrere gjennom vår liste. Vi vil kalle denne eiendommen findName og du kan se det refereres til både på input og i dataene.

<label for=”filtername”>Finn din helt:</label>
<input v-modell=”findName” id=”filtername” type=”tekst” />
data() {
tilbake {
findName: “,
navn: [
‘Evan Du’,
‘John Lindquist’,

]
}
}

Nå, vi kan lage den beregnede eiendom som vil filtrere alle navn basert på hva brukeren har skrevet inn i, så alt i vår findName eiendom. Du vil merke at jeg bruker regex her for å sørge for at feilaktige bruk av store bokstaver spiller ingen rolle, så brukere vil vanligvis ikke kapitalisere som de skriver.

beregnet: {
filteredNames() {
la filteret = new RegExp(denne.findName, ‘jeg’)
gå tilbake til denne.navnene.filteret(el => el.match(filter))
}
}

Og nå kommer vi til å oppdatere hva vi bruker i malen til utgang fra dette:

<ul>
<li v-=”navn i navn”>
{{ navn }}
</li>
</ul>

…til dette:

<ul>
<li v-=”navn i filteredNames”>
{{ navn }}
</li>
</ul>

Og det filtre for oss på at hvert tastetrykk! Vi måtte bare legge til et par linjer med kode for å gjøre dette arbeidet, og trengte ikke å legge noen ekstra biblioteker.

Se Penn Filtrere en liste med Beregnede – enden av Sarah Drasner (@sdras) på CodePen.

Jeg kan ikke fortelle deg hvor mye tid jeg sparer ved å bruke dem. Hvis du bruker Vue og ikke har utforsket dem enda, vennligst gjør det, vil du takke deg selv.

Overvåkere

Vue har fin abstraksjoner, og alle som har vært en programmerer, for en stund vil vanligvis fortelle deg at abstraksjoner kan være en smerte fordi du vil til slutt komme til en bruker tilfelle de ikke kan løse. Men denne situasjonen er redegjort for, fordi Vue gir oss en dypere tilgang til i reaktivitet system, som vi kan utnytte som kroker til å observere noe som er i endring. Dette kan være utrolig nyttig fordi, som programutviklere, det meste av det vi har ansvar for er ting som endrer seg.

Watchers også gir oss mulighet til å skrive mye mer fortellende kode. Du er ikke lenger sporing alt selv. Vue er allerede gjør det under panseret, så du kan også få tilgang til endringene gjort noen egenskaper det er sporing, data, beregnet, eller rekvisitter, for eksempel.

Watchers er utrolig bra for å utføre logikk som gjelder til noe annet når en endring på en eiendom oppstår (jeg først hørte denne måten for å sette det fra Chris Fritz, men han sier at han har kanskje også hørt det fra noen andre ☺️). Dette er ikke en vanskelig regel – du kan absolutt bruke overvåkere for logikk som refererer til eiendommen i seg selv, men det er en fin måte å se på hvordan overvåkere er umiddelbart forskjellig fra beregnet egenskaper, der endringen vil være i referanse til den eiendommen vi har tenkt å bruke.

La oss gå gjennom de enkle eksempel mulig slik at du får en smak av hva som skjer her.

Nettleseren din støtter ikke video-taggen.

nye Vue({
el: ‘#app’,
data() {
tilbake {
teller: 0
}
},
se: {
counter() {
– konsollen.logg(‘telleren har forandret seg!’)
}
}
})

Som du kan se i koden over, vi er lagring disk data, og ved å bruke navnet på eiendommen som navnet på funksjonen, er vi i stand til å se det. Når vi referanse som teller i se på, kan vi observere en endring som eiendel.

Overgangen Stat Med Overvåkere

Hvis staten er lik nok, kan du selv enkelt overgangen staten med overvåkere. Her er et eksempel jeg bygget fra bunnen av et diagram med Vue. Som data endres, voktere vil oppdatere den og rett og slett overgangen mellom dem.

SVG er også bra for en oppgave som dette, fordi det er bygget med matematikk.

Se Penn Diagram laget med Vue, Hvor Staten ved Sarah Drasner (@sdras) på CodePen.

se: {
valgt: funksjon(newValue, oldValue) {

var tweenedData = {}

var oppdatere = function () {
la obj = Objekt.verdier(tweenedData);
obj.pop();
dette.targetVal = obj;
}

var tweenSourceData = { onUpdate: oppdatering, onUpdateScope: denne }

for (la i = 0; i < oldValue.lengde; i++) {
la key = i.toString()
tweenedData[nøkkel] = oldValue[jeg]
tweenSourceData[nøkkel] = newValue[jeg]
}

TweenMax.(tweenedData, 1, tweenSourceData)
}
}

Hva skjedde her?

  • Først laget vi en dummy-objekt som vil bli oppdatert av vår animasjon bibliotek.
  • Da har vi en oppdatering funksjon som er brukt på hver tween trinn. Vi bruker denne til å presse data.
  • Deretter oppretter vi et objekt for å holde kildedataene for å være tweened og funksjon pekeren for oppdatering hendelser.
  • Vi opprette en for-løkke, og slå den gjeldende indeksen inn i en string
  • Da kan vi tween over våre mål dummy-objekt, men vi vil bare gjøre dette for den bestemte nøkkelen

Vi kan også bruke animasjon i overvåkere å lage noe lignende denne gangen forskjellen ringe. Jeg reiser mye og alle mine kolleger er i ulike områder, så jeg ønsket en måte å spore hva lokal tid var vi alle i, samt noen betydningen av endringen fra dagtid/kveldstid også.

Se Penn Vue Tid Sammenligning av Sarah Drasner (@sdras) på CodePen.

Her vi ser de sjekket eiendom, og vi vil skyte forskjellige metoder som inneholder tidslinje, animasjoner som kan endre kulør og metning og noen andre elementer basert på den relative tilknytning til den nåværende tid. Som nevnt tidligere – det skjer en endring i rullegardinmenyen, men hva vi utfører er logikken som er brukt andre steder.

se: {
sjekket() {
la periode = dette.timeVal.skive(-2),
hr = dette.timeVal.skive(0, dette.timeVal.indexOf(‘:’));

const dayhr = 12,
rpos = 115,
rneg = -118;

if ((periode === ‘AM’ && t != 12) || (periode === ‘PM’ && t == 12)) {
dette.spinn(`${rneg – (rneg / dayhr) * hr}`)
dette.animTime(1 – t / dayhr, periode)
} else {
dette.spinn(`${(rpos / dayhr) * hr}`)
dette.animTime(hr / dayhr, periode)
}

}
},

Det er også en rekke andre interessante ting om watchers, for eksempel: vi har gitt tilgang til både nye og gamle versjoner av eiendommen som parametre, kan vi angi dype hvis vi ønsker å se en nestet objekt. For mer detaljert informasjon, men det er mye god informasjon i tv-guiden.

Du kan se hvordan overvåkere kan være utrolig nyttig for noe som er oppdatering—det være seg form innganger, asynkron oppdateringer, eller animasjoner. Hvis du er nysgjerrig på hvordan reaktivitet i Vue fungerer, er denne delen av håndboken, er veldig nyttig. Hvis du ønsker å vite mer om reaktivitet generelt, jeg likte André Staltz’ post og Reaktivitet delen av Mike Bostock er En Bedre Måte å Kode.

Innpakning Opp

Jeg håper dette var en nyttig oversikt på hvordan du kan bruke hvert, og hastigheter opp din søknad utvikling prosess ved hjelp Vue effektivt. Det er en stat der ute som vi bruker 70% av tiden vår som programmerere å lese koden og 30% som du skriver den. Personlig, jeg elsker det, som en maintainer, jeg kan se på en codebase jeg aldri har sett før, og vet umiddelbart hva forfatteren har ment med det skillet som er gjort fra metoder, beregnet, og overvåkere.