Vue Academy · Pelajaran

Properti Computed

Turunkan nilai reaktif yang di-cache dengan properti computed.

Pelajaran 2 dari 313 langkah

Properti Computed adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 3. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 3 pelajaran total.

Apa Itu Properti Computed?

Properti computed menghasilkan nilai dari data reaktif lainnya.

Nilai tersebut dihitung ulang hanya saat dependensinya berubah
Nilai tersebut dibaca seperti properti biasa dalam templat
Properti ini menjaga templat tetap rapi dengan memindahkan logika ke JS

Mendefinisikan computed

Dalam Composition API, gunakan fungsi computed.

import { ref, computed } from "vue"

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

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

Menggunakan computed dalam Templat

computed diakses seperti properti data, tanpa tanda kurung.

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

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

Computed vs Metode

Metode juga mengembalikan nilai, jadi mengapa menggunakan computed?

Computed disimpan dalam tembolok berdasarkan dependensinya
Sebuah metode dijalankan setiap kali dipanggil dalam proses render

Computed lebih efisien untuk nilai turunan yang digunakan berulang kali.

Caching dalam Praktik

computed dijalankan ulang hanya saat dependensi berubah. Jika Anda membacanya beberapa kali, hasil yang tersimpan dalam tembolok akan digunakan kembali.

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

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

Metode Berjalan Setiap Kali

Sebaliknya, metode menghitung ulang pada setiap pemanggilan, meskipun input tidak berubah.

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

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

computed dalam Options API

Options API mendeklarasikan properti computed dalam blok computed.

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

Getter Computed

Secara bawaan, computed bersifat hanya-baca: computed hanya memiliki getter.

Getter dijalankan untuk menghasilkan nilai setiap kali dependensi berubah.

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

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

Setter Computed

Anda dapat membuat computed dapat ditulis dengan menyediakan fungsi get dan set sekaligus.

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

Menggunakan Setter

Saat Anda menetapkan nilai ke computed yang dapat ditulis, setter-nya dijalankan.

fullName.value = "Grace Hopper"

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

Kapan Menggunakan Computed

Gunakan computed saat Anda memerlukan nilai yang diturunkan dari state reaktif.

Memfilter atau mengurutkan daftar
Memformat data untuk ditampilkan
Menggabungkan beberapa nilai menjadi satu

Gunakan pengamat (pada pelajaran berikutnya) saat Anda perlu merespons dengan efek samping.

Pemeriksaan Singkat

Uji pemahaman Anda tentang properti computed.

Jawab di pelajaran interaktif

Ringkasan: Properti Computed

Anda telah mempelajari state turunan:

computed menghasilkan nilai dari data reaktif
Nilainya disimpan dalam tembolok dan dihitung ulang hanya saat dependensi berubah
Metode berjalan setiap kali dipanggil; computed tidak
Computed dapat memiliki getter dan setter opsional

Berikutnya: pengamat dan reaktivitas mendalam.

Gratis untuk memulai

Belajar HTML dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 42
Pelajaran: 156

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Properti Computed” gratis?

Ya — teks lengkap “Properti Computed” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 3 pelajaran total.

Apa yang akan aku pelajari di “Properti Computed”?

Turunkan nilai reaktif yang di-cache dengan properti computed. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 3.

Berapa lama pelajaran “Properti Computed” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Vue Academy