ref() ja reactive()
Luo reaktiivisia primitiivejä ref()-funktiolla, kääri objekteja reactive()-funktiolla ja ymmärrä, milloin kumpaakin käytetään sekä miten ref-arvoja käsitellään .value-ominaisuuden kautta
ref() ja reactive() on ilmainen Frontend Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/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 Frontend Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Frontend Academy-kurssilla on yhteensä 4 oppituntia.
Reaktiivisuus Vue 3:ssa
Vuen 3:n Composition API käyttää reaktiivisia primitiivejä tilan seuraamiseen. Kaksi keskeistä funktiota ovat ref() primitiiviarvoille ja reactive() objekteille. Näiden arvonmuutokset päivittävät käyttöliittymän automaattisesti.
ref() primitiiviarvoille
ref(value) paketoi arvon reaktiiviseen säilöön. Käyttäkää ja muuttakaa arvoa skriptissä .value-ominaisuuden kautta. Mallipohjissa Vue purkaa ref-arvot automaattisesti, joten .valuea ei tarvita.
<script setup>
import { ref } from 'vue';
const count = ref(0);
const name = ref('Alice');
function increment() {
count.value++; // .value in script
}
</script>
<template>
<p>{{ count }}</p> <!-- no .value in template -->
<button @click="increment">+</button>
</template>reactive() objekteille
reactive(object) palauttaa objektista syvästi reaktiivisen proxyn. Ominaisuuksia käytetään suoraan — .valuea ei tarvita missään.
<script setup>
import { reactive } from 'vue';
const form = reactive({
email: '',
password: '',
rememberMe: false
});
// Mutate directly:
form.email = 'user@example.com';
</script>
<template>
<input v-model="form.email">
</template>ref vai reactive — milloin kumpaakin käytetään
Käyttäkää ref()-funktiota seuraaviin: primitiiviarvot (string, number, boolean), null-arvot ja composable-funktioista palautettavat arvot (helpompi hajottaa osiin). Käyttäkää reactive()-funktiota toisiinsa liittyviin tietoihin, jotka kuuluvat yhteen objektiin.
reactive()-hajotuksen sudenkuoppa
Reaktiivisen objektin hajottaminen osiin poistaa reaktiivisuuden, koska irrotetut ominaisuudet ovat tavallisia arvoja eivätkä reaktiivisia ref-arvoja.
const state = reactive({ count: 0 });
const { count } = state; // NOT reactive
count++; // doesn't update Vue's tracking
// Fix: use toRefs() to destructure reactively:
import { toRefs } from 'vue';
const { count } = toRefs(state); // count is now a ref
count.value++;toRef ja toRefs
toRef(obj, 'key') luo yhteen ominaisuuteen linkitetyn ref-arvon. toRefs(obj) muuntaa reaktiivisen objektin kaikki ominaisuudet yksittäisiksi linkitetyiksi ref-arvoiksi, jotka voidaan hajottaa turvallisesti.
import { toRefs } from 'vue';
const user = reactive({ name: 'Alice', age: 30 });
const { name, age } = toRefs(user);
// name and age are refs, still linked to user
name.value = 'Bob'; // user.name also becomes 'Bob'ref() DOM-elementeille
Käyttäkää ref(null)-määritystä yhdessä mallipohjan vastaavan ref-attribuutin kanssa, kun haluatte reaktiivisen viittauksen DOM-elementtiin tai lapsikomponentti-instanssiin.
<script setup>
import { ref, onMounted } from 'vue';
const inputEl = ref<HTMLInputElement | null>(null);
onMounted(() => {
inputEl.value?.focus(); // now the DOM element is available
});
</script>
<template>
<input ref="inputEl" type="text">
</template>isRef ja unref
isRef(val) tarkistaa, onko arvo ref. unref(val) purkaa ref-arvon tai palauttaa arvon sellaisenaan, jos se ei ole ref. Tämä on hyödyllistä composable-funktioissa, jotka hyväksyvät sekä ref-arvoja että tavallisia arvoja.
import { isRef, unref } from 'vue';
function double(val: Ref<number> | number) {
return unref(val) * 2; // works with both ref and plain number
}shallowRef ja shallowReactive
shallowRef() on reaktiivinen vain ylimmällä tasolla, ei syvästi. shallowReactive() toimii objekteille samalla tavalla. Käyttäkää näitä suorituskyvyn optimointiin, kun syvää reaktiivisuutta ei tarvita, esimerkiksi suurissa muuttumattomissa tietorakenteissa.
reactive()-arvojen muuttaminen ja korvaaminen
Käyttäkää reactive()-funktion kanssa ominaisuuksien suoraa muuttamista. Koko objektia ei voi korvata, koska reactive() tarvitsee saman viitteen. Korvaamiseen kannattaa käyttää ref()-funktiota, joka sallii määrityksen ref.value = newObject.
const state = reactive({ items: [] });
state.items.push(newItem); // OK
state.items = [newItem]; // also OK (mutating the property)
// state = reactive({ items: [newItem] }); // LOSES REACTIVITY — can't reassignSyvä reaktiivisuus
reactive() on oletusarvoisesti syvästi reaktiivinen — Vue seuraa sisäkkäisten objektien ja taulukoiden muutoksia. Tämä on kätevää, mutta voi kuluttaa paljon resursseja erittäin suurten objektien kanssa. Harkitkaa shallowReactive-funktion käyttöä suorituskykykriittisissä tilanteissa.
Pikatarkistus
Miksi reactive()-objektin hajottaminen osiin poistaa reaktiivisuuden?
Kertaus: ref() ja reactive()
ref() paketoi primitiiviarvoja; skriptissä niitä käytetään .valuen kautta, ja mallipohjissa ne puretaan automaattisesti. reactive() tekee objekteista syvästi reaktiivisia; muuttakaa ominaisuuksia suoraan. Hajottaminen poistaa reaktiivisuuden — käyttäkää toRefs()-funktiota. Käyttäkää ref(null)-määritystä mallipohjan elementtiviittauksille. shallowRef ja shallowReactive sopivat suorituskyvyn optimointiin. isRef ja unref ovat composable-apufunktioita.
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 ”ref() ja reactive()” ilmainen?
Kyllä – oppitunnin ”ref() ja reactive()” 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 Frontend Academy-kurssin, päivitä CoddyKit PROhon. Frontend Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”ref() ja reactive()”?
Luo reaktiivisia primitiivejä ref()-funktiolla, kääri objekteja reactive()-funktiolla ja ymmärrä, milloin kumpaakin käytetään sekä miten ref-arvoja käsitellään .value-ominaisuuden kautta Harjoittelet Frontend Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Frontend Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Frontend 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 ”ref() ja reactive()”-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ä Frontend Academy-oppitunnilla?
Kyllä. Jokainen Frontend 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
- ref() ja reactive()
- computed() ja watch()
- setup()-funktio ja script setup
- Composables: uudelleenkäytettävät Composition-funktiot