Memoisointitekniikat
Välttäkää turhaa laskentaa memoisoimalla.
Memoisointitekniikat on ilmainen Vue Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/3. 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ä 3 oppituntia.
Vähemmän työtä
Suorituskyky paranee usein, kun ette laske uudelleen tai renderöi uudelleen asioita, jotka eivät ole muuttuneet. Vue tarjoaa useita memoization-työkaluja, jotka tallentavat tuloksia välimuistiin ja ohittavat tarpeettomat päivitykset.
Computed-välimuisti
computed-ominaisuus tallentaa tuloksensa välimuistiin ja laskee sen uudelleen vain, kun jokin sen reaktiivisista riippuvuuksista muuttuu. Siksi se on huomattavasti edullisempi kuin jokaisella renderöintikerralla suoritettava metodi.
computed: {
expensiveTotal() {
return this.items.reduce((sum, i) => sum + i.price, 0)
}
}Computed ja metodi
Metodi suoritetaan aina, kun template renderöidään uudelleen, vaikka sen syötteet olisivat samoja. Computed käyttää uudelleen välimuistissa olevaa arvoaan, joten suosikaa computed-ominaisuuksia templateissa käytettäville johdetuille tiedoille.
// method: runs on EVERY render
methods: { total() { /* ... */ } }
// computed: cached until items change
computed: { total() { /* ... */ } }v-once staattiselle sisällölle
v-once-direktiivi renderöi elementin kerran ja ohittaa sen sen jälkeen kaikissa tulevissa päivityksissä. Käyttäkää sitä sisällölle, joka ei koskaan muutu.
<template>
<h1 v-once>{{ appTitle }}</h1>
</template>Milloin v-oncea käytetään
Käyttäkää v-once-direktiiviä suurissa staattisissa osioissa, kuten alatunnisteessa, ehtotekstissä tai kiinteässä yläosassa. Vue käsittelee renderöidyn tuloksen staattisena eikä koskaan vertaa sitä uudelleen.
<footer v-once>
<p>Copyright 2024. All rights reserved.</p>
</footer>v-memo raskaille listoille
v-memo-direktiivi memoisoituu alipuuhun ja renderöi sen uudelleen vain, kun jokin sen riippuvuustaulukon arvoista muuttuu. Se on erityisen hyödyllinen suurissa listoissa.
<div v-for="item in list" :key="item.id" v-memo="[item.selected]">
{{ item.name }} - {{ item.selected }}
</div>Näin v-memo toimii
Kukin kohde renderöidään uudelleen vain, kun sen memo-taulukko muuttuu. Jos item.selected pysyy samana, Vue ohittaa kyseisen rivin uudelleenrenderöinnin kokonaan, vaikka ylempi komponentti päivittyisi.
Tarpeettomien uudelleenrenderöintien välttäminen
Komponentit renderöidään uudelleen, kun niiden reaktiiviset tiedot tai propsit muuttuvat. Pitäkää komponentit pieninä ja selkeästi rajattuina, jotta yhden alueen muutos ei pakota toisiinsa liittymättömiä osia renderöitymään uudelleen.
Vakaat avaimet listoissa
Antakaa v-for-direktiiville aina vakaa ja yksilöllinen :key. Taulukkoindeksin käyttäminen avaimena voi saada Vuen käyttämään vääriä DOM-solmuja uudelleen ja renderöimään tarpeettoman paljon uudelleen.
<!-- prefer a stable id -->
<li v-for="user in users" :key="user.id">{{ user.name }}</li>Reaktiivisten tietojen pitäminen vähäisinä
Sijoittakaa tietoja reaktiiviseen tilaan vain, jos template riippuu niistä. Suuret objektit tai arvot, jotka eivät koskaan muutu käyttöliittymässä, lisäävät reaktiivisuuden seurannan kustannuksia. Käyttäkää tarvittaessa tavallisia, ei-reaktiivisia muuttujia.
import { shallowRef } from "vue"
// shallowRef avoids deep reactivity on large objects
const bigConfig = shallowRef(loadConfig())Puhdasten funktioiden memoisoiminen
Vuen reaktiivisuuden ulkopuolisissa puhtaissa JavaScript-laskutoimituksissa voitte tallentaa tuloksia yksinkertaiseen mapiin, jolloin saman syötteen toistuvat kutsut palauttavat tuloksen välittömästi.
const cache = new Map()
function fib(n) {
if (n < 2) return n
if (cache.has(n)) return cache.get(n)
const result = fib(n - 1) + fib(n - 2)
cache.set(n, result)
return result
}Pikatarkistus
Testatkaa tietonne memoizationista.
Kertaus
Vähentäkää hukkaan menevää työtä välimuistilla: computed-ominaisuudet memoisoivat johdetut arvot, v-once renderöi staattisen sisällön kerran ja v-memo ohittaa alipuiden uudelleenrenderöinnin suurissa listoissa. Käyttäkää vakaita avaimia ja pitäkää reaktiivinen tila vähäisenä. Seuraavaksi opitte löytämään ja korjaamaan suorituskyvyn pullonkauloja oikeilla työkaluilla.
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 ”Memoisointitekniikat” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Vue Academy-oppimispolun 3 oppituntia, myös oppitunnin “Memoisointitekniikat”. 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ä 3 oppituntia.
Mitä opin oppitunnilla ”Memoisointitekniikat”?
Välttäkää turhaa laskentaa memoisoimalla. 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 2/3.
Kuinka kauan ”Memoisointitekniikat”-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
- Laiska lataus ja koodin jakaminen
- Memoisointitekniikat
- Pullonkaulojen tunnistaminen ja korjaaminen