Elinkaarikoukut ja datan haku
Hakekaa data komponentin elinkaaren oikeassa vaiheessa
Elinkaarikoukut ja datan haku 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.
Milloin data kannattaa hakea
Komponenteilla on elinkaari: ne luodaan, liitetään DOM:iin, päivitetään ja lopulta irrotetaan. Kun tiedätte, mitä elinkaaren hookia datan hakemiseen käytetään, sovelluksen toiminta pysyy responsiivisena ja oikeana.
created-hook
created-hook suoritetaan, kun reaktiivinen data on määritetty mutta ennen komponentin lisäämistä DOM:iin. Se on hyvä paikka aloittaa datan hakeminen, koska reaktiivisuus toimii jo tässä vaiheessa.
export default {
data() {
return { posts: [] }
},
created() {
this.fetchPosts()
}
}mounted-hook
mounted-hook suoritetaan, kun komponentti on lisätty DOM:iin. Käyttäkää sitä, kun hakulogiikka tarvitsee DOM-elementtejä tai kolmannen osapuolen kirjastoja, jotka edellyttävät renderöityä elementtiä.
export default {
mounted() {
this.fetchPosts()
// template refs are now available here
}
}created vs mounted
Pelkkään datan hakemiseen kumpikin sopii. created suoritetaan hieman aikaisemmin, joten pyyntö alkaa nopeammin. Valitkaa mounted vain silloin, kun todella tarvitsette renderöidyn DOM:n. Useimmille API-kutsuille kumpikin sopii.
onMounted Composition API:ssa
Composition API:ssa elinkaaren hookit ovat importoituja funktioita, joita kutsutaan setup-funktion sisällä. mounted-hookia vastaava hook on onMounted.
import { ref, onMounted } from "vue"
import { api } from "./api"
export default {
setup() {
const posts = ref([])
onMounted(async () => {
const res = await api.get("/posts")
posts.value = res.data
})
return { posts }
}
}Lataustilan malli
Verkkopyynnöt vievät aikaa. Seuratkaa loading-lippua, jotta voitte näyttää latausilmaisimen datan saapumisen ajan ja piilottaa sen, kun pyyntö on valmis.
data() {
return {
posts: [],
loading: false
}
}Lataustilan vaihtaminen
Asettakaa loading arvoksi true ennen pyyntöä ja takaisin arvoksi false sen jälkeen lopputuloksesta riippumatta.
async fetchPosts() {
this.loading = true
try {
const res = await api.get("/posts")
this.posts = res.data
} finally {
this.loading = false
}
}Latausilmaisimen näyttäminen
Ohjatkaa templaatissa loading-lipun perusteella sitä, näytetäänkö latausilmaisin vai viesti datan latautuessa.
<template>
<p v-if="loading">Loading...</p>
<ul v-else>
<li v-for="post in posts" :key="post.id">{{ post.title }}</li>
</ul>
</template>Tyhjien tulosten käsittely
Varautukaa aina tyhjään vastaukseen. Näyttäkää ystävällinen viesti, kun haettu lista ei sisällä kohteita.
<ul v-if="posts.length">
<li v-for="post in posts" :key="post.id">{{ post.title }}</li>
</ul>
<p v-else>No posts found.</p>Composition API:n lataustilan malli
Sama lataustilan malli toimii suoraan myös Composition API:ssa ref-arvojen avulla.
const posts = ref([])
const loading = ref(false)
async function load() {
loading.value = true
try {
posts.value = (await api.get("/posts")).data
} finally {
loading.value = false
}
}
onMounted(load)Haetun datan näyttäminen
Kun data on reaktiivisessa tilassa, templaatti renderöi sen automaattisesti. Yhdistäkää lataus-, data- ja tyhjän tuloksen tilat viimeistellyn käyttökokemuksen saavuttamiseksi.
<template>
<section>
<p v-if="loading">Loading...</p>
<ul v-else-if="posts.length">
<li v-for="p in posts" :key="p.id">{{ p.title }}</li>
</ul>
<p v-else>Nothing here yet.</p>
</section>
</template>Pikatesti
Testatkaa, kuinka hyvin hallitsette elinkaaren hookit ja datan hakemisen.
Kertaus
Hakekaa dataa created- tai mounted-hookissa tai Composition API:ssa onMounted-hookissa. Seuratkaa loading-lippua yhdessä rakenteen try/finally kanssa, jotta käyttöliittymä voi näyttää latausilmaisimen, renderöidä datan ja käsitellä tyhjiä tuloksia. Seuraavaksi teette näistä pyynnöistä vankempia käsittelemällä virheitä ja käyttämällä interceptoreita.
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 ”Elinkaarikoukut ja datan haku” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Vue Academy-oppimispolun 3 oppituntia, myös oppitunnin “Elinkaarikoukut ja datan haku”. 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 ”Elinkaarikoukut ja datan haku”?
Hakekaa data komponentin elinkaaren oikeassa vaiheessa 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 ”Elinkaarikoukut ja datan haku”-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
- HTTP-pyynnöt Axiosilla
- Elinkaarikoukut ja datan haku
- Virheenkäsittely ja globaalit interceptors-komponentit