Phenquestions
Kad runa ir par ligzdotu vai dziļu datu veidu, piemēram, masīvu vai objektu, aprēķināšanu, Vue.js vai jebkura cita programmēšanas valoda automātiski nenosaka datu hierarhiskas izmaiņas. Tomēr mēs visi zinām, ka Vue.js nodrošina skatīšanās un aprēķinātās īpašības, lai veiktu dažus izmaiņu mainīgos. Bet, kad runa ir par ligzdotu datu izmaiņām, Vue.js to nenosaka. Šis ieraksts iemācīsies veikt dažas izmaiņas, skatoties masīvu vai objektu ligzdotos datus.
Pirms uzzināt par ligzdoto datu skatīšanu Vue.js, vispirms sapratīsim, kā darbojas pulksteņa īpašums?
Skatīties īpašumu
Pulksteņa rekvizīts tiek izmantots mainīgā skatīšanai un ļauj lietotājam veikt dažus vēlamos uzdevumus mainīgā mainībā.
Piemērs: skatieties mainīgo
Piemēram, mainot kādu mainīgo, mēs vēlamies kaut ko mierināt. Šāda koda rakstīšanas sintakse Vue notiks šādi:
Šī ir testēšanas lapa
Pēc iepriekš minētā koda uzrakstīšanas tīmekļa lapa būtu šāda.
Ja noklikšķinām uz pogas, pogas “noklikšķināt” atribūta dēļ ir jāmaina “boolVar” stāvoklis, un pulkstenim automātiski jānosaka izmaiņas “boolVar” un jāparāda ziņojuma virkne konsolē.
Tas darbojās pilnīgi labi; konsolē tiek parādīts ziņojums “Noklikšķināts uz pogas”.
Bet vērotājs nespēj atklāt izmaiņas un netiek atlaists, kad runa ir par masīvu vai objektu vērošanu. Apskatīsim tā demonstrāciju.
Piemērs: objekta skatīšanās
Pieņemsim, ka mūsu komponentā ir objekts, un mēs vēlamies parādīt izmaiņas, kas notika objekta īpašumā. Turpmāk sniegtajā piemērā esmu izveidojis objektu ar nosaukumu “objVar”, kas satur divus atslēgas vērtību pārus, “item” un “daudzums”. Esmu izveidojis pogu, kur veidnes taga daudzumam pievienoju “1”. Visbeidzot, es skatos objekta “objVar” pulksteņa īpašumā un rādu konsoles ziņojumu.
Šī ir testēšanas lapa
Šis kods it kā parāda objekta daudzuma izmaiņas. Bet, kad mēs izpildām kodu un tīmekļa lapā noklikšķiniet uz pogas:
Jūs varat redzēt iepriekš gif; konsolē nekas nenotiek.
Iemesls tam ir tas, ka vērotājs neiedziļinās objektu vērtībās, un tā ir īstā problēma, kuru mēs tagad atrisināsim.
Vue.js nodrošina dziļu īpašību, lai skatītos dziļi objektu un masīvu vērtībās. Dziļā rekvizīta izmantošanas un ligzdoto datu skatīšanas sintakse ir šāda:
Šajā sintaksē mēs esam iestatījuši dziļo rekvizītu uz true un pārkārtojuši handler () funkciju.
Tagad, pēc koda maiņas, mēs atkārtoti ielādējam tīmekļa lapu un noklikšķiniet uz pogas:
Šeit jūs varat redzēt, ka vērotājs strādā un parāda ziņojumu konsolē.
Secinājums
Pēc šī ziņojuma lasīšanas Vue dziļu vai ligzdotu datu struktūru skatīšanās un aprēķināšana.js vairs nav grti. Mēs esam iemācījušies vērot objekta vai masīva vērtības maiņu un izpildīt dažus uzdevumus, izmantojot Vue “dziļās” īpašības.js.
