Phenquestions
Kun on kyse sisäkkäisten tai syvien tietotyyppien, kuten matriisien tai objektien, laskemisesta, Vue.js tai jokin muu ohjelmointikieli ei tunnista automaattisesti hierarkkista muutosta tiedoissa. Kuitenkin me kaikki tiedämme tuon Vuen.js tarjoaa kellon ja lasketut ominaisuudet joidenkin muuttujien suorittamiseksi. Mutta kun on kyse sisäkkäisistä tietojen muutoksista, Vue.js ei havaitse sitä. Tämä viesti oppii tekemään joitain muutoksia katsomalla matriisien tai objektien sisäkkäisiä tietoja.
Ennen oppimista sisäkkäisten tietojen katselemisesta Vue-sivustossa.js, ymmärretään ensin, kuinka kello-omaisuus toimii?
Katso omaisuutta
Katseluominaisuutta käytetään muuttujan katseluun, ja sen avulla käyttäjä voi suorittaa joitain haluttuja tehtäviä muuttujan muutoksesta.
Esimerkki: Katso muuttuja
Esimerkiksi jonkin muuttujan muuttuessa haluamme lohduttaa jotain. Syntaksi tällaisen koodin kirjoittamiseksi Vue-palveluun tapahtuu seuraavasti:
Tämä on testaussivu
Kun olet kirjoittanut yllä olevan koodin, verkkosivu olisi tällainen.
Jos napsautamme painiketta, "boolVar" -tilaa tulisi muuttaa painikkeen napsautettavan määritteen takia, ja kellon tulisi tunnistaa automaattisesti "boolVar" -muutos ja näyttää viestimerkkijono konsolissa.
Se toimi täysin hyvin; viesti "Button clicked" näkyy konsolissa.
Mutta tarkkailija ei havaitse muutosta eikä saa potkut matriisien tai esineiden katsomisesta. Katsotaanpa esittely siitä.
Esimerkki: Objektin katselu
Oletetaan, että komponentissamme on objekti ja haluamme näyttää objektin ominaisuudessa tapahtuneen muutoksen. Alla olevassa esimerkissä olen luonut objektin nimeltä "objVar", joka sisältää kaksi avain-arvo-paria, "item" ja "määrä". Olen luonut painikkeen, johon lisätään ”1” mallin tunnisteen määrään. Lopuksi katson kello-omaisuuden ”objVar” -objektia ja näytän konsoliviestiä.
Tämä on testaussivu
Tämän koodin on tarkoitus näyttää objektin määrän muutos. Mutta kun suoritamme koodin ja napsautamme verkkosivun painiketta:
Voit nähdä yllä olevasta gifistä; mitään ei tapahdu konsolissa.
Syynä tähän on, että katsoja ei tutki syvälle esineiden arvoja, ja tämä on todellinen ongelma, johon aiomme ratkaista nyt.
Vue.js tarjoaa syvän ominaisuuden katseluun syvälle esineiden ja taulukoiden arvoihin. Syntaksi syvän ominaisuuden käyttämiseen ja sisäkkäisten tietojen katseluun on seuraava:
Tässä syntaksissa olemme asettaneet syvän ominaisuuden tosi-arvoksi ja järjestäneet käsittelijän () toiminnon uudelleen.
Nyt, koodin vaihtamisen jälkeen, lataamme verkkosivun uudelleen ja napsautamme painiketta:
Täällä voit nähdä, että tarkkailija työskentelee ja näyttää viestin konsolissa.
Johtopäätös
Tämän viestin lukemisen jälkeen voit katsella ja laskea syvällisiä tai sisäkkäisiä tietorakenteita Vuessa.js ei ole enää vaikeaa. Olemme oppineet seuraamaan kohteen tai taulukon arvon muutosta ja suorittamaan joitain tehtäviä Vuen "syvän" ominaisuuden avulla.js.
