v-memo templaten memoisaatioon
v-memo-direktiivi, riippuvuustaulukko, renderöinnin ohittamisen ehdot ja vertailu computediin
v-memo templaten memoisaatioon on ilmainen Vue Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Vue Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Vue Academy-kurssilla on yhteensä 4 oppituntia.
Mikä on v-memo
v-memo memooi osan templaatista. Vue tallentaa renderöidyn tuloksen välimuistiin ja renderöi alipuun uudelleen vain, kun jokin luetelluista riippuvuuksista muuttuu. Se on suorituskyvyn optimointikeino raskaille, enimmäkseen staattisille merkintöjärakenteille.
Riippuvuustaulukko
Sitokaa taulukko riippuvuuksia. Niin kauan kuin jokainen taulukon arvo on sama kuin edellisellä kerralla, Vue ohittaa koko elementin ja sen lasten päivityksen.
<div v-memo="[dep1, dep2]">
<!-- skipped unless dep1 or dep2 change -->
</div>Tyhjä taulukko
Tyhjä taulukko v-memo="[]" tarkoittaa, että sisältö renderöidään kerran eikä sitä päivitetä enää koskaan – sama kuin staattisen sisällön renderöiminen vain kerran.
<div v-memo="[]">
<!-- rendered once, never re-rendered -->
</div>Ensisijainen käyttötapaus: v-for
v-memo-direktiiviä käytetään ennen kaikkea valtavien listojen kanssa. Sijoittakaa se v-for-direktiivin sisälle, jotta kukin rivi renderöidään uudelleen vain, kun sen omat olennaiset tiedot muuttuvat.
<div
v-for="item in list"
:key="item.id"
v-memo="[item.id === selectedId]"
>
...
</div>Valitun rivin memoointi
Klassisessa esimerkissä tuhannet rivit renderöidään uudelleen vain, kun niiden valittu-tila vaihtuu. Vertailu item.id === selectedId tarkoittaa, että rivi päivittyy vain, kun se valitaan tai sen valinta poistetaan.
<tr
v-for="item in items"
:key="item.id"
v-memo="[item.id === selectedId]"
>
<td :class="{ active: item.id === selectedId }">
{{ item.name }}
</td>
</tr>Luetelkaa kaikki reaktiiviset riippuvuudet
Teidän on sisällytettävä kaikki reaktiiviset arvot, joista alipuussa riippuu. Jos yksi unohtuu, elementti ei päivity kyseisen arvon muuttuessa – tästä voi seurata vaikeasti havaittava vanhentuneen käyttöliittymän virhe.
<!-- WRONG: name can change but is not listed -->
<div v-memo="[item.id]">{{ item.name }}</div>Älkää yhdistäkö v-if:n kanssa
Älkää sijoittako v-memo-direktiiviä samaan elementtiin v-if-direktiivin tai v-for-direktiivin rakenteisten direktiivien kanssa ristiriitaisella tavalla. Erityisesti v-memo- ja v-if-direktiiviä ei tueta samassa elementissä, ja niiden käyttö tuottaa määrittelemätöntä toimintaa.
<!-- AVOID -->
<div v-memo="[a]" v-if="show">...</div>v-memo ja computed
computed tallentaa reaktiivisesta tilasta johdetun arvon välimuistiin. v-memo tallentaa renderöidyt VNodet välimuistiin. Ne ratkaisevat eri ongelmia: computed estää datan uudelleenlaskennan, v-memo estää merkintärakenteen uudelleenrenderöinnin.
Milloin computed riittää
Jos pullonkaulana on datan uudelleenlaskenta, kuten suodatus, lajittelu tai muotoilu, käyttäkää ensin computed-funktiota – se on yksinkertaisempi ja sitä on vaikeampi käyttää väärin.
import { computed } from "vue";
const sorted = computed(() =>
[...items.value].sort((a, b) => a.rank - b.rank)
);Milloin v-memo auttaa
Käyttäkää v-memo-direktiiviä vain, kun profilointi osoittaa suuren listan uudelleenrenderöinnin hallitsevan suoritusajan ja useimmat rivit pysyvät päivitysten välillä muuttumattomina.
Mitatkaa ensin
v-memo lisää muistin käyttöä ja vertailukustannuksia. Pienillä listoilla se voi olla hitaampi kuin tavallinen renderöinti. Profiloikaa aina ennen muutosta ja sen jälkeen varmistaaksenne, että suorituskyky todella parani.
Pikatarkistus
Milloin v-memo on oikea työkalu?
Kertaus
v-memo="[deps]" ohittaa alipuun uudelleenrenderöinnin niin kauan kuin kaikki luetellut riippuvuudet pysyvät muuttumattomina – siksi se sopii erityisesti suuriin v-for-listoihin. Luetelkaa kaikki reaktiiviset riippuvuudet, älkää koskaan yhdistäkö sitä v-if-direktiivin kanssa samassa elementissä, suosikaa computed-funktiota johdettuihin arvoihin ja profiloikaa aina todellisen suorituskykyhyödyn varmistamiseksi.
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
- 42
- Oppitunnit
- 156
Usein kysytyt kysymykset
Onko oppitunti ”v-memo templaten memoisaatioon” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Vue Academy-oppimispolun 3 oppituntia, myös oppitunnin “v-memo templaten memoisaatioon”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Vue Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”v-memo templaten memoisaatioon”?
v-memo-direktiivi, riippuvuustaulukko, renderöinnin ohittamisen ehdot ja vertailu computediin Harjoittelet Vue Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Vue Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Vue Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.
Kuinka kauan ”v-memo templaten memoisaatioon”-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ä Vue Academy-oppitunnilla?
Kyllä. Jokainen Vue 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
- v-memo templaten memoisaatioon
- Profilointi Vue DevToolsin Performance-välilehdellä
- Virtuaalinen vieritys suurille listoille
- Web Workerit Vuen kanssa