Methoden, Berekend, en in Watchers Vue.js

0
23

Een van de redenen waarom ik hou van het werken met Vue is, want hoe handig methoden, berekend, en watchers zijn, en de leesbaarheid van hun onderscheid. Tot het begrijpen van alle drie, het is moeilijk te profiteren van de functionaliteit van de Vue om zijn volledige potentieel. Nog steeds is de meerderheid van de mensen die ik zie in de war over dit kader hebben de neiging om ook worden verward over de verschillen hier, dus laten we graven in.

In het geval u behoefte aan een snel antwoord en niet de tijd hebben om door te lezen het hele artikel hier is een kleine TL;DR:

  • Methoden: Dit zijn precies wat ze lijken ze misschien (yay, de naamgeving!). Ze zijn functies hangen af van een object—meestal de Vue instantie zelf of van een Vue-component.
  • Berekend: met Deze eigenschappen kunnen op het eerste gezicht als ze worden gebruikt als een methode, maar het niet zijn. In Vue, gebruiken wij de gegevens voor het bijhouden van wijzigingen op een specifieke eigenschap die we willen graag reactief is. Berekende eigenschappen stellen ons in voor het definiëren van een onroerend goed dat wordt op dezelfde manier gebruikt als de gegevens, maar kan ook hebben een aantal aangepaste logica die is opgeslagen op basis van de afhankelijkheden. U kunt overwegen berekend eigenschappen een andere weergave van uw gegevens.
  • Voor vogelaars: Dit zijn zodat je een kijkje in de reactiviteit van het systeem. We aangeboden een aantal haken met die tot het nakomen van enige eigenschappen die zijn opgeslagen door Vue. Als we willen om een beetje toe te voegen van de functionaliteit van elke keer dat er iets verandert, of reageren op een bepaalde wijziging, konden we kijken naar een woning en het toepassen van enige logica. Dit betekent dat de naam van de watcher moet overeenkomen met wat we proberen te observeren.

Als een van deze klinkt verwarrend, maak je geen zorgen! We duiken in meer hieronder en hopelijk adres verwarring. Als u bekend bent met vanille JavaScript al, methoden mogen worden vrij duidelijk is, afgezien van één of twee kanttekeningen. Het zou dan behoove u (ik hou van dat woord) om verder te gaan naar de Berekende en Kijkers delen.

Methoden

Methodes zijn waarschijnlijk iets wat je van plan bent om veel tijdens het werken met Vue. Ze treffend genoemd, in essentie, we hangen een functie van een object. Ze zijn ongelooflijk handig voor het aansluiten van de functionaliteit van de richtlijnen voor evenementen, of zelfs alleen maar het maken van een klein beetje van logica om te worden hergebruikt als elke andere functie. U kunt het aanroepen van een methode in een andere methode, bijvoorbeeld. U kunt ook bellen met een methode binnen een levenscyclus van de haak. Ze zijn zeer veelzijdig.

Hier is een eenvoudige demo te tonen:

Zie de Pen Slim voorbeeld van methoden door Sarah Drasner (@sdras) op CodePen.

de <code class=”language-css”><div id=”app”>
knop <@klik=”tryme”>Probeer Me</button>
<p>{{ bericht }}</p>
</div>
nieuwe Vue({
el: ‘#app’,
gegevens() {
terug {
bericht: null
}
},
methoden: {
tryme() {
deze.bericht = Date()
}
}
})

We kunnen ook uitgevoerd, de logica in de richtlijn zelf, zoals de knop <@klik=”message = Date()”>Probeer Me</button>, die zeer goed werkt voor dit kleine voorbeeld. Echter, naarmate de complexiteit van onze applicatie groeit, het is meer gebruikelijk om te doen zoals wij hierboven gezien hebben om het te breken uit het leesbaar te houden. Er is ook een limiet aan de logica die Vue zal u toelaten om uit te drukken in een richtlijn, bijvoorbeeld uitingen zijn toegestaan, maar verklaringen niet.

Je kunt merken dat we in staat zijn om toegang te krijgen tot deze methode binnen dat onderdeel of Vue aanleg, en bellen we een stuk van onze gegevens hier in dit geval.bericht. U hoeft niet te bellen voor een methode, zoals je zou noemen een functie binnen een richtlijn. Bijvoorbeeld @klik=”methodName()” is overbodig. U kunt verwijzen met @klik=”methodName”, tenzij u nodig hebt om een parameter, zoals @klik=”methodName(param)”.

Met behulp van de richtlijnen voor het aanroepen van methoden is ook mooi, want we hebben een aantal bestaande bepalingen. Een voorbeeld is dat zeer nuttig is .voorkomen, die houden het indienen van een gebeurtenis uit het herladen van de pagina gebruikt, zoals deze:

<v vorm-op:in te dienen.voorkomen=”onSubmit”></form>

Er zijn er veel meer, hier zijn slechts een paar.

Berekend

Berekende eigenschappen zijn zeer waardevol voor het manipuleren van gegevens die al bestaat. Wanneer je aan het bouwen bent iets waar je nodig hebt om te sorteren door middel van een grote groep van gegevens en hoeft u niet opnieuw wilt uitvoeren die berekeningen op elke toetsaanslag, na te denken over het gebruik van een berekende waarde.

Een aantal goede kandidaten zijn, maar zijn niet beperkt tot:

  • Het bijwerken van een grote hoeveelheid informatie tijdens een gebruiker aan het typen is, zoals het filteren van een lijst
  • Het verzamelen van gegevens van uw Vuex winkel
  • Formulier validatie
  • Data visualisaties die veranderen afhankelijk van wat de gebruiker hoeft te zien

Berekende eigenschappen zijn een essentieel onderdeel van de Vue te begrijpen. Ze zijn berekeningen die worden opgeslagen op basis van hun afhankelijkheden en zal alleen updaten wanneer dat nodig is. Ze zijn uiterst performante wanneer goed gebruikt en buitengewoon nuttig. Er zijn veel grote bibliotheken die het verwerken van dit soort logica dat je nu kunt elimineren met slechts een paar regels code.

Berekende eigenschappen worden niet gebruikt als methoden, hoewel op het eerste, ze zou kunnen lijken – je waarin ook enige logica in een functie en het terugkeren – maar de naam van die functie wordt een eigenschap die zou je dan gebruiken in je toepassing, zoals gegevens.

Als we ze nodig hadden om te filteren deze grote lijst van de namen van de helden die gebaseerd is op wat de gebruiker aan het typen was, hier is hoe wij het zouden doen. We houden dit heel eenvoudig, zodat je kunt krijgen van de basis concepten naar beneden. Oorspronkelijk onze lijst zou uitgang in onze template met namen, die we opslaan in een gegevens:

nieuwe Vue({
el: ‘#app’,
gegevens() {
terug {
namen: [
‘Evan’,
‘John Lindquist’,
‘Jen ‘ Looper’,
‘Mirjam, Suzanne’,

]
}
}
})
<div id=”app”>
<h1>Helden</h1>
<ul>
<li v-for=”naam in namen”>
{{ naam }}
</li>
</ul>
</div>

Nu maken we een filter voor die namen. We zullen beginnen door het creëren van een ingang met v-model dat oorspronkelijk een lege tekenreeks zijn, maar we zullen uiteindelijk gebruik te passen en filteren door middel van onze lijst. We noemen deze eigenschap findName en je kunt zien waarnaar verwezen wordt, zowel op de ingang en in de gegevens.

<label for=”filternaam”>Vind je held:</label>
<input v-model=”findName” id=”filternaam” type=”text” />
gegevens() {
terug {
findName: “,
namen: [
‘Evan’,
‘John Lindquist’,

]
}
}

Nu, we kunnen de berekende goederen die filter alle namen op basis van wat de gebruiker heeft ingevoerd in de input, dus alles wat in onze findName eigendom. Je opmerking dat ik het gebruik van regex hier om ervoor te zorgen dat niet identieke hoofdletters maakt niet uit, als gebruikers doorgaans niet zal profiteren als ze typen.

berekend: {
filteredNames() {
laat filter = new RegExp(deze.findName, ‘ik’)
retourneren.namen.filter(el => el.match(filter))
}
}

En nu werken we wat we gebruiken in de sjabloon om de uitgang van dit:

<ul>
<li v-for=”naam in namen”>
{{ naam }}
</li>
</ul>

…bij deze:

<ul>
<li v-for=”naam in filteredNames”>
{{ naam }}
</li>
</ul>

En filters voor ons op elke toetsaanslag! We moesten alleen het toevoegen van een paar regels code om dit werk te maken, en niet het laden van eventuele aanvullende bibliotheken.

Zie de Pen Filter een lijst met Berekende het einde van Sarah Drasner (@sdras) op CodePen.

Ik kan je niet vertellen hoeveel tijd bespaar ik met hen. Als u Vue en nog niet hebben verkend hen nog niet, dan kunt u, u zult dank voor jezelf.

Watchers

Vue heeft een mooie abstracties, en iedereen die een programmeur voor een tijdje zal meestal zeggen dat je die abstracties kan een pijn want je zult uiteindelijk op een gebruik voor het geval ze niet op kunnen lossen. Echter, deze situatie is verantwoord, omdat Vue geeft ons een diepere toegang tot de reactiviteit van het systeem, die we kunnen benutten als haken te observeren, iets dat verandert. Dit kan ongelooflijk nuttig zijn omdat, zoals applicatie-ontwikkelaars, het meeste van wat we verantwoordelijk voor zijn dingen die veranderen.

Vogelaars kunnen we ook schrijven veel meer declaratieve code. Je bent niet meer bijhouden alles zelf. Vue is al bezig met het onder de motorkap, zo kunt u ook toegang hebben tot wijzigingen in de eigenschappen het bijhouden, gegevens, berekend, of rekwisieten, bijvoorbeeld.

Watchers zijn ongelooflijk goed voor het uitvoeren van de logica die wordt toegepast op iets anders wanneer er een wijziging op een eigenschap optreedt (hoorde ik voor het eerst deze manier van het aantrekken van Chris Fritz, maar hij zegt dat hij misschien ook gehoord van iemand anders ☺️). Dit is geen harde regel – u kunt absoluut gebruik watchers voor logica die verwijst naar de woning zelf, maar het is een leuke manier van kijken naar hoe watchers zijn onmiddellijk afwijkt van de berekende eigenschappen, waar de wijziging in verwijzing naar de eigenschap die we willen gebruiken.

Laten we uitvoeren door middel van de meest eenvoudige voorbeeld is mogelijk, zodat u een voorproefje krijgen van wat hier gebeurt.

Uw browser ondersteunt niet de video tag.

nieuwe Vue({
el: ‘#app’,
gegevens() {
terug {
teller: 0
}
},
bekijk: {
counter() {
console.log(‘De teller is veranderd!’)
}
}
})

Zoals u kunt zien in de code hierboven, slaan we de teller in gegevens, en door het gebruik van de naam van de eigenschap als de naam van de functie, zijn we in staat om het te bekijken. Wanneer we verwijzen naar die teller kijken, kunnen we het nakomen van enige verandering aan die goederen.

De Overgang Staat Met Watchers

Als de status is vergelijkbaar genoeg is, kunt u ook gewoon de overgang van de staat met vogelaars. Hier is een voorbeeld dat ik vanuit het niets opgebouwd van een grafiek met Vue. Als de gegevens worden gewijzigd, de wachters zullen bijwerken en gewoon overgang tussen hen.

SVG is ook goed voor een taak, zoals dit is omdat het is gebouwd met wiskunde.

Zie de Pen kaart gemaakt met Vue, Overgang van State door Sarah Drasner (@sdras) op CodePen.

bekijk: {
geselecteerd: functie(newValue, oldValue) {

var tweenedData = {}

var update = function () {
laat obj = Object.waarden(tweenedData);
obj.pop();
deze.targetVal = obj;
}

var tweenSourceData = { onUpdate: update onUpdateScope: dit }

voor (i = 0; i < oldValue.lengte; i++) {
laat sleutel = ik.toString()
tweenedData[key] = oldValue[i]
tweenSourceData[key] = newValue[i]
}

TweenMax.(tweenedData, 1, tweenSourceData)
}
}

Wat is hier gebeurd?

  • Eerst hebben we een dummy-object dat wordt bijgehouden door onze animatie bibliotheek.
  • Dan hebben we een update van de functie die wordt aangeroepen op elke tween stap. We gebruiken dit om te duwen de gegevens.
  • Daarna maken we een object te houden van de brongegevens worden getweende en de functie-pointer voor het bijwerken van evenementen.
  • We maken een lus en draai aan de huidige index in een string
  • Dan kunnen we tween over de ons doel dummy-object, maar we zullen dit alleen doen voor de specifieke toets

We kunnen ook gebruik maken van animatie in watchers te maken met iets als dit verschil te bellen. Ik een beetje reizen en al mijn collega ‘s zijn in verschillende gebieden, dus ik wilde een manier om bij te houden wat de lokale tijd waren we allemaal in, evenals enkele betekenis van de wijziging van overdag en’ s nachts.

Zie de Pen Vue Vergelijking in de Tijd van Sarah Drasner (@sdras) op CodePen.

Hier zijn we aan het kijken bent de eigenschap checked, en we zullen het vuur verschillende methoden bevatten tijdlijn animaties die veranderen van de tint en de verzadiging en een aantal andere elementen op basis van de relatieve vereniging op de huidige tijd. Zoals eerder vermeld – de wijziging vindt plaats op de lijst, maar wat we uitvoeren is het logisch dat het elders toegepast.

bekijk: {
gecontroleerd() {
laten periode = dit.timeVal”.segment(-2),
hr = dit.timeVal”.segment(0,.timeVal”.indexOf(‘:’));

const dayhr = 12,
rpo ‘ s = 115,
rneg = -118;

als ((periode === ‘BEN’ && hr != 12) || (periode === ‘PM’ && hr == 12)) {
deze.spin(`${rneg – (rneg / dayhr) * hr}`)
deze.animTime(1 – hr / dayhr, periode)
} else {
deze.spin(`${(rpo ‘ s / dayhr) * hr}`)
deze.animTime(hr / dayhr, periode)
}

}
},

Er zijn ook een aantal andere interessante dingen over watchers, bijvoorbeeld: krijgen we toegang tot zowel de nieuwe als de oude versies van de eigendom als parameters, kunnen we bepalen diep als we willen kijken naar een geneste object. Voor meer gedetailleerde informatie, er is veel goede informatie in de gids.

U kunt zien hoe watchers kan ongelooflijk nuttig zijn voor alles, dat het bijwerken van het formulier ingangen, asynchrone updates, of animaties. Als je nieuwsgierig bent hoe reactiviteit in Vue werkt, is dit deel van de gids is erg vriendelijk en behulpzaam. Als u meer wilt weten over reactiviteit in het algemeen, ik heb echt genoten van Andre Staltz’ post en de Reactiviteit gedeelte van Mike Bostock is Een Betere Manier om Code.

Inpakken

Ik hoop dat dit was een handige verdeling over het gebruik van elk, en versnelt uw applicatie-ontwikkeling proces door gebruik te maken Vue efficiënt. Er is een stat die wij besteden 70% van onze tijd als programmeurs het lezen van de code en 30% te schrijven. Persoonlijk, ik hou van dat, als onderhouder, ik kan kijken naar een codebase ik nooit eerder heb gezien en weet direct wat de auteur bedoeld heeft, door het onderscheid dat wordt gemaakt van methoden, berekend, en vogelaars.