beforeUpdate ja afterUpdate
Liittykää päivityssykliin tutkiaksenne tai muokataksenne DOM-puuta ennen reaktiivisia muutoksia ja niiden jälkeen.
beforeUpdate ja afterUpdate on ilmainen Sveltejs Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Sveltejs Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Sveltejs Academy-kurssilla on yhteensä 4 oppituntia.
Milloin ne suoritetaan
beforeUpdate suoritetaan ennen kuin reaktiiviset päivitykset viedään DOM:iin, ja afterUpdate suoritetaan heti sen jälkeen.
Käyttötapaukset
Käyttäkää niitä DOM-mittojen lukemiseen ennen muutoksia ja vierityssijainnin säätämiseen niiden jälkeen.
Keskustelun automaattinen vieritys
Tyypillinen käyttötapaus on vierittää keskustelu automaattisesti alareunaan vain, jos käyttäjä oli jo valmiiksi alareunassa.
let div, autoscroll;
beforeUpdate(() => {
autoscroll = div && (div.scrollTop + div.offsetHeight >= div.scrollHeight - 20);
});
afterUpdate(() => {
if (autoscroll) div.scrollTo(0, div.scrollHeight);
});Suoritetaan usein
Nämä takaisinkutsut suoritetaan jokaisen päivityksen yhteydessä. Pitäkää ne nopeina.
Toiminta palvelimella
Niitä ei suoriteta SSR:n aikana. Käsitelkää niitä vain selaimessa käytettävinä.
Yhdistäkää huolellisesti
beforeUpdate-vaiheessa tallennettua tilaa voidaan käyttää afterUpdate-vaiheessa mittaa ja käytä -mallissa.
Välttäkää useimmassa logiikassa
Useimmat toiminnot kuuluvat reaktiivisiin lausekkeisiin tai action-toimintoihin. Käyttäkää näitä vain DOM-mittauksiin.
Suoritusjärjestys
Järjestys päivityksen aikana: reaktiiviset lausekkeet -> beforeUpdate -> DOM-korjaus -> afterUpdate.
Ensimmäinen liittäminen
Molemmat suoritetaan ensimmäisen liittämisen yhteydessä myöhempien päivitysten lisäksi. Huomioikaa ensimmäinen suoritus.
Yhdistäkää bind:this-rakenteeseen
Tarvitsette viittauksen DOM-elementtiin sen mittaamista varten. Käyttäkää bind:this-rakennetta.
Tick-vaihtoehto
Yksittäisiin mittauksiin muutoksen jälkeen await tick() voi olla selkeämpi vaihtoehto.
Pikatarkistus
Milloin afterUpdate suoritetaan?
Kertaus
beforeUpdate tallentaa muutosta edeltävän tilan, kun taas afterUpdate lukee juuri päivitettyä DOM:ia tai muokkaa sitä.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 41
- Oppitunnit
- 163
Usein kysytyt kysymykset
Onko oppitunti ”beforeUpdate ja afterUpdate” ilmainen?
Kyllä – oppitunnin ”beforeUpdate ja afterUpdate” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Sveltejs Academy-kurssin, päivitä CoddyKit PROhon. Sveltejs Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”beforeUpdate ja afterUpdate”?
Liittykää päivityssykliin tutkiaksenne tai muokataksenne DOM-puuta ennen reaktiivisia muutoksia ja niiden jälkeen. Harjoittelet Sveltejs Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Sveltejs Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Sveltejs Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.
Kuinka kauan ”beforeUpdate ja afterUpdate”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Sveltejs Academy-oppitunnilla?
Kyllä. Jokainen Sveltejs Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- onMount: suorittaminen renderöinnin jälkeen
- onDestroy: siivous
- beforeUpdate ja afterUpdate
- tick(): DOM-päivitysten odottaminen