Metoder Beräknas, och i Viktväktarna Vue.js

0
20

En av anledningarna till att jag älskar att arbeta med Vue är på grund av hur användbara metoder beräknas, och bevakare, och läsbarhet av deras åtskillnad. Tills förstå alla tre, det är svårt att utnyttja den funktionalitet Vue till sin fulla potential. Fortfarande, de flesta människor jag ser förvirrad över denna ram tenderar att också vara förvirrad om skillnaderna här, så låt oss gräva i.

Om du behöver ett snabbt svar och inte har tid att läsa igenom hela artikeln, här är en liten TL;DR:

  • Metoder: Detta är exakt vad de låter som de kan vara (yay, namngivning!). De är funktioner som hänger ut för ett objekt—typiskt Vue exempel själv eller en Vue komponent.
  • Beräknad: Dessa egenskaper kan till en början ser ut som om de skulle användas som en metod, men det är det inte. I Vue vi använder data för att spåra ändringar för en viss fastighet att vi skulle vilja vara reaktiv. Beräknade egenskaper tillåter oss att definiera en fastighet som används på samma sätt som data, men kan också ha några egna logik som är cachade baserat på dess beroenden. Du kan överväga beräknade egenskaper en annan syn på dina data.
  • Watchers: Detta är att låta dig en inblick i den reaktivitet system. Vi erbjöd några krokar med att följa de eventuella egenskaper som lagras av Vue. Om vi vill lägga till lite funktioner varje gång något ändras, eller svarar på en viss förändring, vi kunde titta på en fastighet och tillämpa en viss logik. Detta innebär att namnet på watcher har för att matcha vad vi försöker följa.

Om något av detta låter förvirrande, oroa dig inte! Vi ska dyka i ytterligare nedan och förhoppningsvis rätta till eventuella missförstånd. Om du är bekant med vanilj JavaScript redan, metoder kan vara ganska uppenbart att du, bortsett från en eller två förbehåll. Det kan då passa dig (jag älskar det uttrycket) för att hoppa till den Beräknade och Bevakare avsnitt.

Metoder

Metoder är sannolikt något som du kommer att använda en hel del medan du arbetar med Vue. De är verkligen ett passande namn som, i huvudsak, vi hänger en funktion av ett objekt. De är otroligt användbara för att ansluta funktionalitet för att direktiven för händelser, eller bara skapa en liten bit av logik för att återanvändas som någon annan funktion. Du kan anropa en metod i en annan metod, till exempel. Du kan också ringa en metod inne i en livscykel krok. De är mycket mångsidig.

Här är en enkel demo för att visa:

Se Pen Slim exempel på metoder av Sarah Drasner (@sdras) på CodePen.

<kod class=”språket-css”><div id=”app”>
<knappen @klicka=”tryme”>Prova Mig</button>
<p>{{ message }}</p>
</div>
nya Vue({
el: ‘#app”,
data() {
return {
meddelande: null
}
},
metoder: {
tryme() {
detta.meddelande = Datum()
}
}
})

Vi kunde även ha utfört logik i själva direktivet som knappen <@klicka=”message = Datum()”>Prova Mig</button>, som fungerar mycket bra för detta lilla exempel. Men eftersom komplexiteten i vårt program växer, det är mer vanligt att göra som vi ser ovan att bryta upp den för att hålla den läsbar. Det finns även en gräns till den logik som Vue kommer att tillåta dig att uttrycka i ett direktiv, till exempel, uttryck är tillåtna, men de uttalanden är det inte.

Du kanske märker att vi skall kunna få tillgång till denna metod inom den komponent eller Vue exempel, och vi kan ringa någon bit av våra uppgifter här, i det här fallet.meddelandet. Du behöver inte ringa en metod som du skulle kalla en funktion i ett direktiv. Till exempel, @klicka=”methodName()” är onödiga. Du kan referera till den med @klicka=”methodName”, om du behöver skicka med en parameter, som @klicka=”methodName(param)”.

Med hjälp av direktiven att anropa metoder är också trevlig eftersom vi har några befintliga modifierare. Ett exempel som är väldigt användbar är den .förhindra, som kommer att hålla en fram händelsen från att ladda sidan, används så här:

<formen v-on:skicka in.förhindra=”onSubmit”></form>

Det finns många fler, här är bara några.

Beräknat

Beräknade egenskaper är mycket värdefulla för att manipulera data som redan existerar. När du ska bygga något där du måste sortera igenom en stor grupp av data, och om du inte vill köra dessa beräkningar på varje tangenttryckning, tänk på att använda ett beräknat värde.

Några bra kandidater inkluderar, men är inte begränsade till:

  • Uppdatera en stor mängd information samtidigt som en användare skriver något, till exempel filtrering en lista
  • Samla in information från din Vuex butik
  • Formulärutvärdering
  • Visualiseringar av Data som ändras beroende på vad användaren behöver för att se

Beräknade egenskaper är en viktig del av Vue att förstå. De beräkningar som kommer att cachas baserat på deras beroenden och endast kommer att uppdatera när det behövs. De är extremt hög prestanda när den används väl och oerhört användbart. Det finns många stora bibliotek för att hantera denna typ av logik som du nu kan eliminera med bara några rader kod.

Beräknade egenskaper som inte används som metoder, men först, de kan se ut – du anger en viss logik i en funktion och återvänder – men i namn av att funktionen blir en fastighet som du sedan använda i din ansökan som data.

Om vi som behövs för att filtrera denna stora lista över namn på de hjältar som bygger på vad användaren skriver, här är hur vi skulle göra det. Vi håller det väldigt enkelt så att du kan få grundbegreppen ner. Ursprungligen vår lista skulle produktionen i vår mall med hjälp av namn, som vi lagrar i data:

nya Vue({
el: ‘#app”,
data() {
return {
namn: [
‘Evan Du’,
“John Lindquist’,
‘Jen Ögla’,
‘Miriam Suzanne’,

]
}
}
})
<div id=”app”>
<h1>Hjältar</h1>
<ul>
<li v-for=”namn namn”>
{{ namn }}
</li>
</ul>
</div>

Låt oss nu skapa ett filter för dessa namn. Vi kommer att börja med att skapa en ingång med v-modell som kommer att ursprungligen vara en tom sträng, men vi kommer så småningom att använda för att matcha och filtrera genom vår lista. Vi kallar detta hotell findName och du kan se det som refereras både på ingång och i data.

<label for=”filtername”>Hitta din hjälte:</label>
<ingång v-modellen=”findName” id=”filtername” type=”text” />
data() {
return {
findName: “,
namn: [
‘Evan Du’,
“John Lindquist’,

]
}
}

Nu kan vi skapa den beräknade egendom att filtrera alla namn som baseras på vad användaren har skrivit in i ingången, så något i vår findName egendom. Du ska notera att jag använder regex här för att se till att felaktigt aktivering spelar ingen roll, så som du som användare normalt inte dra som de skriver.

beräknad: {
filteredNames() {
låt filter = new RegExp(det här.findName, ‘jag’)
tillbaka detta.namn.filter(el => el.match(filter))
}
}

Och nu ska vi uppdatera vad vi använder i mallen för output från detta:

<ul>
<li v-for=”namn namn”>
{{ namn }}
</li>
</ul>

…till det här:

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

Och det filter för oss på varje tangenttryckning! Vi hade bara att lägga till ett par rader kod för att göra detta arbete, och inte har för att ladda en ytterligare bibliotek.

Se Pennan Filtrera en lista med Beräknade slutet av Sarah Drasner (@sdras) på CodePen.

Jag kan inte säga hur mycket tid jag sparar genom att använda dem. Om du använder Vue och har inte utforskat dem ännu, gör, du kommer att tacka dig själv.

Viktväktarna

Vue har fin abstraktioner, och alla som har varit en programmerare för en stund vanligtvis kommer att tala om för dig att abstraktioner kan vara en smärta för du kommer så småningom att komma till användning om de inte kan lösa. Denna situation är emellertid stod för, eftersom Vue ger oss några djupare tillgång till i reaktivitet system, som vi kan utnyttja som krokar för att observera något som är föränderligt. Detta kan vara oerhört användbart eftersom, som applikationsutvecklare, de flesta av vad vi är ansvarig för saker och ting att förändras.

På viktväktarna också tillåta oss att skriva så mycket mer deklarativ kod. Du är inte längre spårning allt själv. Vue redan gör det under huven, så att du kan dessutom få tillgång till förändringar som har gjorts i några egenskaper det är att spåra, data, beräknade, eller rekvisita, till exempel.

Viktväktarna är otroligt bra för att köra logik som gäller något annat när en förändring på en fastighet sker (första gången jag hörde detta sätt att se på saken från Chris Fritz, men han säger att han kanske har också hört det från någon annan ☺️). Detta är inte en hård regel – du kan absolut använda watchers för logik som avser fastigheten i sig, men det är ett trevligt sätt att se på hur watchers är direkt annorlunda från beräknade egenskaper, där förändringen kommer att vara en referens till den egendom som vi har för avsikt att använda.

Låt oss gå igenom de mest enkla exempel möjligt så får du en smak av vad som händer här.

Din webbläsare har inte stöd för video-taggen.

nya Vue({
el: ‘#app”,
data() {
return {
disk: 0
}
},
titta på: {
counter() {
konsolen.logga in (“counter har förändrats!’)
}
}
})

Som du kan se i koden ovan, vi förvarar disken i data, och genom att använda namnet på den egendom som funktionen heter, vi kan titta på det. När vi nedan att motverka titta i, att vi kan se någon förändring till egendomen.

Övergår Tillståndet Med Viktväktarna

Om staten är tillräckligt lika, du kan även enkelt övergång staten med viktväktarna. Här är ett exempel som jag byggt från grunden av ett diagram med Vue. När data ändras, watchers kommer att uppdatera det och helt enkelt övergång mellan dem.

SVG är också bra för en uppgift som denna, eftersom den är byggd med matte.

Se Pennan Diagram görs med Vue, Övergår Tillståndet av Sarah Drasner (@sdras) på CodePen.

titta på: {
valda: funktion(newValue, oldValue) {

var tweenedData = {}

var uppdatering = function () {
låt obj = Objekt.värden(tweenedData);
pr.pop();
detta.targetVal = obj;
}

var tweenSourceData = { onUpdate: uppdatering, onUpdateScope:}

för (låt i = 0; i < oldValue.längd; i++) {
låt key = jag.toString()
tweenedData[key] = oldValue[jag]
tweenSourceData[key] = newValue[jag]
}

TweenMax.till(tweenedData, 1, tweenSourceData)
}
}

Vad har hänt här?

  • Först skapade vi en dummy objekt som kommer att bli uppdaterad med våra animation bibliotek.
  • Sedan har vi en uppdatering funktion som anropas på varje tween steg. Vi använder denna för att driva data.
  • Sedan skapar vi ett objekt att hålla källdata för att vara tweened och den funktion som pekaren för att uppdatera händelser.
  • Vi skapar en for-loop, och vända den nuvarande index i en sträng
  • Då kan vi tween över våra mål dummy objekt, men vi ska bara göra det här för särskild nyckel

Vi kan också använda animation i viktväktarna för att skapa något som den här gången skillnad ratten. Jag reser en del och alla mina medarbetare i olika områden, så jag ville ha ett sätt att ta reda på vad lokal tid var vi alla, liksom några betydelsen av förändringen från dagtid/nattetid.

Se Pennan Vue Tid Jämfört med Sarah Drasner (@sdras) på CodePen.

Här ska vi titta på kontrollerade fastigheten, och vi ska brand olika metoder som innehåller timeline-animationer att ändra nyans och mättnad och några andra element baserat på relativa association till den aktuella tiden. Som nämnt tidigare – den förändring som sker på den nedrullningsbara, men det vi utför är logik som tillämpas på annat håll.

titta på: {
markerad() {
låt period = detta.timeVal.skiva(-2),
hr = detta.timeVal.skiva(0, detta.timeVal.indexOf(‘:’));

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

if ((period === ‘ÄR’ && hr != 12) || (period === ‘PM’ && hr == 12)) {
detta.spin(`${rneg – (rneg / dayhr) * hr}`)
detta.animTime(1 – hr / dayhr, period)
} else {
detta.spin(`${(rpos / dayhr) * hr}`)
detta.animTime(hr / dayhr, period)
}

}
},

Det finns också ett antal andra intressanta saker om viktväktarna, till exempel: vi har gett tillgång till både nya och gamla versioner av den egendom som parametrar, kan vi ange djup på om vi skulle vilja titta på en inkapslade objekt. För mer detaljerad information, det finns en hel del bra information i guiden.

Du kan se hur viktväktarna kan vara oerhört värdefullt för något som uppdaterar—vara den form ingångar, asynkrona uppdateringar, eller animationer. Om du är nyfiken på hur reaktivitet i Vue fungerar, denna del av guiden är riktigt bra. Om du vill veta mer om reaktivitet i allmänhet, jag gillade verkligen Andre Staltz’ post och Reaktivitet avsnitt av Mike Bostock är Ett Bättre Sätt att Koden.

Att Linda Upp

Jag hoppas att detta var en bra uppdelning på hur man använder varje, och snabbar upp din ansökan utvecklingsprocessen med hjälp Vue på ett effektivt sätt. Det är en stat där ute som vi spenderar 70% av vår tid som programmerare att läsa koden och 30% som skriver det. Personligen älskar jag det, som en underhållare, jag kan titta på en kodbas som jag aldrig sett innan och vet direkt vad författaren har avsett med den åtskillnad som görs från metoder beräknas, och bevakare.