Vue Academy · Oppitunti

Computed-ominaisuudet

Johtakaa välimuistitettuja reaktiivisia arvoja computed-ominaisuuksilla

Oppitunti 2/313 vaihetta

Computed-ominaisuudet 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.

Mikä on computed-ominaisuus?

computed-ominaisuus johtaa arvon muusta reaktiivisesta datasta.

Se lasketaan uudelleen vain, kun sen riippuvuudet muuttuvat
Sitä käytetään malleissa tavallisen ominaisuuden tapaan
Se pitää mallit selkeinä siirtämällä logiikan JavaScriptiin

computed-ominaisuuden määrittely

Composition API -rajapinnassa käyttäkää computed-funktiota.

import { ref, computed } from "vue"

const firstName = ref("Ada")
const lastName = ref("Lovelace")

const fullName = computed(() => {
  return firstName.value + " " + lastName.value
})

computed-ominaisuuden käyttö mallissa

computed-ominaisuuteen pääsee käsiksi dataominaisuuden tapaan ilman sulkeita.

<template>
  <p>{{ fullName }}</p>
</template>

<!-- fullName updates automatically when
     firstName or lastName change -->

computed vai metodit

Metodi palauttaa myös arvon, joten miksi käyttää computedia?

Computed välimuistitetaan riippuvuuksien perusteella
Metodi suoritetaan joka kerta, kun sitä kutsutaan renderöinnin aikana

Computed on tehokkaampi toistuvasti käytettäville johdetuille arvoille.

Välimuistin käyttö käytännössä

computed suoritetaan uudelleen vain, kun riippuvuus muuttuu. Jos sitä luetaan useita kertoja, välimuistiin tallennettua tulosta käytetään uudelleen.

const expensive = computed(() => {
  console.log("computing...")
  return heavyCalculation(data.value)
})

// Reading expensive twice in one render
// logs "computing..." only once

Metodit suoritetaan joka kerta

Sen sijaan metodi laskee tuloksen uudelleen jokaisella kutsulla, vaikka syötteet eivät olisi muuttuneet.

// In template: {{ getTotal() }} {{ getTotal() }}
// Calls getTotal twice, recomputing both times

methods: {
  getTotal() {
    return this.price * this.qty
  }
}

computed Options API -rajapinnassa

Options API määrittelee computed-ominaisuudet computed-lohkossa.

export default {
  data() {
    return { price: 10, qty: 3 }
  },
  computed: {
    total() {
      return this.price * this.qty
    }
  }
}

computed-getterit

Oletusarvoisesti computed on vain luku -muodossa: sillä on vain getter.

Getter suoritetaan arvon tuottamiseksi aina, kun riippuvuudet muuttuvat.

const doubled = computed(() => count.value * 2)

// You can read doubled.value
// but assigning to it would warn

computed-setterit

Voitte tehdä computed-ominaisuudesta kirjoitettavan antamalla sekä get- että set-funktion.

const fullName = computed({
  get() {
    return first.value + " " + last.value
  },
  set(newValue) {
    const parts = newValue.split(" ")
    first.value = parts[0]
    last.value = parts[1]
  }
})

Setterin käyttäminen

Kun sijoitatte arvon kirjoitettavaan computed-ominaisuuteen, sen setter suoritetaan.

fullName.value = "Grace Hopper"

// The setter splits and assigns:
// first.value -> "Grace"
// last.value  -> "Hopper"

Milloin computed-ominaisuutta käytetään

Käyttäkää computedia, kun tarvitsette reaktiivisesta tilasta johdetun arvon.

Luettelon suodattaminen tai lajittelu
Datan muotoilu näyttöä varten
Useiden arvojen yhdistäminen yhdeksi

Käyttäkää watchereita (seuraavalla oppitunnilla), kun haluatte sen sijaan reagoida sivuvaikutuksilla.

Pikatesti

Testatkaa ymmärrystänne computed-ominaisuuksista.

Vastaa interaktiivisessa oppitunnissa

Kertaus: computed-ominaisuudet

Opitte johdetusta tilasta:

computed johtaa arvoja reaktiivisesta datasta
Se välimuistitetaan ja lasketaan uudelleen vain, kun riippuvuudet muuttuvat
Metodit suoritetaan jokaisella kutsulla, computed ei
Computed-ominaisuudella voi olla getter ja valinnainen setter

Seuraavaksi: watcherit ja syvä reaktiivisuus.

Aloita maksutta

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

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Computed-ominaisuudet” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Vue Academy-oppimispolun 3 oppituntia, myös oppitunnin “Computed-ominaisuudet”. 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 ”Computed-ominaisuudet”?

Johtakaa välimuistitettuja reaktiivisia arvoja computed-ominaisuuksilla 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 ”Computed-ominaisuudet”-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

← Takaisin: Vue Academy