Angular Academy · Pelajaran

Menurunkan State dengan computed

Bangun model baca dari state dasar.

Menurunkan State dengan computed adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. 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 Angular Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Angular Academy mencakup 4 pelajaran total.

Status Turunan

Sering kali status dihitung dari status lain: total dari item, daftar yang difilter, atau penanda validitas. computed() Angular membuat sinyal hanya-baca yang nilainya diturunkan dari sinyal lain.

Membuat computed

Berikan sebuah fungsi kepada computed(). Fungsi tersebut membaca sinyal lain dan mengembalikan sebuah nilai. Hasilnya dihitung ulang hanya saat salah satu dependensinya berubah.

import { signal, computed } from '@angular/core';

const price = signal(10);
const qty = signal(3);
const total = computed(() => price() * qty());
// total() === 30

Pelacakan Dependensi Otomatis

Anda tidak perlu mendeklarasikan dependensi. Sinyal apa pun yang dibaca di dalam fungsi otomatis menjadi dependensi. Ubah qty dan total dihitung ulang; ubah sinyal yang tidak berkaitan dan total tidak dihitung ulang.

Memoisasi

computed() menyimpan hasilnya dalam tembolok. Membacanya berkali-kali hanya menjalankan fungsi sekali sampai dependensi berubah. Dengan demikian, model baca turunan tetap ringan meskipun diakses dalam banyak pengikatan templat.

const expensive = computed(() => heavyTransform(data()));
// reading expensive() repeatedly does not re-run heavyTransform

Computed dalam Store

Di dalam store sinyal, ekspos model baca terhitung agar komponen menerima nilai yang siap dirender, alih-alih menghitung ulangnya di dalam templat.

@Injectable({ providedIn: 'root' })
export class CartStore {
  private _items = signal<Item[]>([]);
  readonly items = this._items.asReadonly();
  readonly count = computed(() => this._items().length);
  readonly subtotal = computed(() =>
    this._items().reduce((s, i) => s + i.price, 0));
}

Merangkai computed

Sinyal terhitung dapat membaca sinyal terhitung lainnya. Bangun model baca berlapis: turunan dasar memasok nilai untuk turunan tingkat yang lebih tinggi.

const subtotal = computed(() => items().reduce((s, i) => s + i.price, 0));
const tax = computed(() => subtotal() * 0.2);
const total = computed(() => subtotal() + tax());

Memfilter dan Mencari

Salah satu model baca yang umum adalah memfilter daftar berdasarkan sinyal pencarian. Hasil yang difilter diperbarui setiap kali daftar atau query berubah.

const query = signal('');
const all = signal<User[]>([]);
const filtered = computed(() =>
  all().filter(u => u.name.toLowerCase().includes(query().toLowerCase())));

Tanpa Efek Samping

Fungsi computed() harus murni: fungsi tersebut hanya membaca sinyal dan mengembalikan nilai. Jangan mengubah status, memanggil API, atau menulis ke sinyal lain di dalamnya. Untuk efek samping, gunakan effect().

Kesetaraan dan Melewati Pembaruan

Secara default, computed menggunakan kesetaraan referensial (Object.is) untuk menentukan apakah nilai berubah. Jika nilai baru sama dengan nilai lama, konsumen tidak diberi tahu sehingga pekerjaan yang tidak perlu dapat dihindari.

const status = computed(() => count() > 0 ? 'has' : 'empty');
// while count stays > 0 the string stays 'has' -> no downstream updates

Menggunakan computed dalam Templat

Baca sinyal terhitung di dalam templat seperti sinyal lainnya. Angular hanya memperbarui pengikatan yang nilai terhitungnya benar-benar berubah.

@Component({
  template: '<p>Items: {{ store.count() }} — Total: {{ store.subtotal() }}</p>'
})
export class SummaryComponent {
  store = inject(CartStore);
}

Computed vs Metode

Gunakan computed() untuk nilai yang diturunkan dari status, yang harus diperbarui otomatis dan dimemoisasi. Gunakan metode biasa untuk perhitungan sekali pakai yang menerima argumen atau harus dijalankan sesuai permintaan.

Pemeriksaan Singkat

Periksa pemahaman Anda tentang sinyal terhitung.

Ringkasan

Anda telah membangun status turunan dengan computed(): pelacakan dependensi otomatis, fungsi murni yang dimemoisasi, model baca yang dapat dirangkai, serta pembaruan yang dilewati berdasarkan kesetaraan. Ekspos model baca terhitung dari store agar templat tetap deklaratif.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menurunkan State dengan computed” gratis?

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

Apa yang akan aku pelajari di “Menurunkan State dengan computed”?

Bangun model baca dari state dasar. Kamu berlatih Angular 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 Angular Academy?

Tidak diperlukan pengalaman sebelumnya. Angular 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 4.

Berapa lama pelajaran “Menurunkan State dengan 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 Angular Academy ini?

Ya. Setiap pelajaran Angular 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 Angular Academy