Phenquestions
Als het gaat om de berekening van geneste of diepe gegevenstypen zoals arrays of objecten, is Vue.js of een andere programmeertaal detecteert niet automatisch de hiërarchische verandering in de gegevens. We weten echter allemaal dat Vue.js biedt de horloge- en berekende eigenschappen om enkele wijzigingsvariabelen uit te voeren. Maar als het gaat om wijzigingen in geneste gegevens, is Vue.js detecteert dat niet. Dit bericht leert enkele wijzigingen door te voeren door de geneste gegevens van arrays of objecten te bekijken.
Voordat u leert over het bekijken van geneste gegevens in Vue.js, laten we eerst begrijpen hoe de eigenschap watch werkt watch?
Bekijk eigendom
De eigenschap watch wordt gebruikt om een variabele te bekijken en stelt de gebruiker in staat een aantal gewenste taken uit te voeren bij de wijziging van de variabele.
Voorbeeld: een variabele bekijken
Als we bijvoorbeeld een variabele veranderen, willen we iets troosten. De syntaxis voor het schrijven van dergelijke code in Vue gaat als volgt:
Dit is een testpagina
Na het schrijven van de bovenstaande code, zou de webpagina er zo uitzien:.
Als we op de knop klikken, moet de status van de "boolVar" worden gewijzigd als gevolg van het on-click-attribuut van de knop, en het horloge moet automatisch de verandering in "boolVar" detecteren en de berichtreeks op de console weergeven.
Het werkte prima; het bericht "Knop geklikt" wordt weergegeven op de console.
Maar de kijker kan de verandering niet detecteren en wordt niet ontslagen als het gaat om het bekijken van de arrays of objecten. Laten we daar een demonstratie van zien.
Voorbeeld: een object bekijken
Stel dat we een object in onze component hebben en we willen de wijziging weergeven die is opgetreden in de eigenschap van het object. In het onderstaande voorbeeld heb ik een object gemaakt met de naam "objVar", dat twee sleutel-waardeparen bevat, "item" en "hoeveelheid". Ik heb een knop gemaakt waarbij ik "1" toevoeg aan de hoeveelheid van de sjabloontag. Ten slotte bekijk ik het object "objVar" in de eigenschap watch en geef ik een consolebericht weer.
Dit is een testpagina
Nu wordt verondersteld dat deze code de verandering in de hoeveelheid van het object weergeeft. Maar wanneer we de code uitvoeren en op de knop op de webpagina klikken:
Je kunt in de bovenstaande gif zien; er gebeurt niets in de console.
De reden hierachter is dat de kijker niet diep in de waarden van de objecten kijkt, en dit is het echte probleem dat we nu gaan oplossen.
Vue.js biedt de eigenschap deep om diep in de waarden van objecten en arrays te kijken. De syntaxis voor het gebruik van de eigenschap deep en het bekijken van de geneste gegevens is als volgt:
In deze syntaxis hebben we de eigenschap deep op true gezet en de functie handler() opnieuw gerangschikt.
Als we nu, na het wijzigen van de code, de webpagina opnieuw laden en op de knop klikken:
Hier kun je zien dat de watcher aan het werk is en het bericht in de console weergeeft.
Conclusie
Na het lezen van dit bericht, kijken en berekenen van diepe of geneste datastructuren in Vue.js is niet moeilijk meer. We hebben geleerd hoe we de verandering van een waarde in een object of array kunnen bekijken en enkele taken kunnen uitvoeren met behulp van de "deep" eigenschap van Vue.js.
