Angular Academy · Pelajaran

Sinyal Terhitung

Turunkan nilai yang diperbarui secara otomatis.

Sinyal Terhitung adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 1 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.

Apa Itu Sinyal Terhitung

Sinyal computed() menghasilkan nilai dari satu atau beberapa sinyal lain. Setiap kali sinyal sumber berubah, nilai terhitung dihitung ulang secara malas — hanya ketika dibaca.

Sinyal terhitung hanya dapat dibaca: Anda tidak dapat memanggil .set() pada sinyal tersebut.

Membuat computed

Berikan sebuah fungsi ke computed(). Angular secara otomatis melacak setiap sinyal yang Anda baca di dalamnya.

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

const price = signal(100);
const quantity = signal(2);

const total = computed(() => price() * quantity());

console.log(total()); // 200

Pelacakan Dependensi Otomatis

Anda tidak perlu mendeklarasikan dependensi secara manual. Membaca price() dan quantity() di dalam callback secara otomatis mendaftarkan keduanya sebagai dependensi.

Jika sebuah sinyal dibaca secara kondisional tetapi jalurnya tidak tercapai, sinyal tersebut tidak dilacak pada eksekusi itu.

const showTax = signal(false);
const tax = signal(20);
const base = signal(100);

const final = computed(() =>
  showTax() ? base() + tax() : base()
);
// When showTax() is false, "tax" is NOT a dependency

Kemalasan dan Memoisasi

Sebuah computed hanya berjalan ketika dibaca, lalu menyimpan hasilnya dalam cache. Jika Anda membacanya dua kali tanpa perubahan pada sumber, fungsi tersebut hanya berjalan sekali.

const a = signal(1);
const doubled = computed(() => {
  console.log('recompute');
  return a() * 2;
});

doubled(); // logs "recompute", returns 2
doubled(); // cached, returns 2, no log

Merangkai Sinyal Terhitung

Sinyal terhitung dapat bergantung pada sinyal terhitung lainnya sehingga membentuk grafik reaktif.

const firstName = signal('Ada');
const lastName = signal('Lovelace');

const fullName = computed(() => firstName() + ' ' + lastName());
const greeting = computed(() => 'Hello, ' + fullName());

console.log(greeting()); // Hello, Ada Lovelace

Menggunakan computed dalam Komponen

Sinyal terhitung sangat bermanfaat dalam komponen. Templat hanya dirender ulang ketika nilai terhitung benar-benar berubah.

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

@Component({
  selector: 'app-cart',
  template: '<p>Total: {{ total() }}</p>'
})
export class CartComponent {
  items = signal([10, 20, 30]);
  total = computed(() => this.items().reduce((a, b) => a + b, 0));
}

computed Hanya Dapat Dibaca

Mencoba menetapkan nilai pada sinyal terhitung akan menghasilkan error saat kompilasi. Sinyal ini ada semata-mata untuk menyatakan state turunan.

const count = signal(0);
const doubled = computed(() => count() * 2);

// doubled.set(10); // ERROR: Property 'set' does not exist
count.set(5);       // OK - update the source instead
console.log(doubled()); // 10

Kesetaraan dan Perhitungan Ulang yang Dilewati

Secara default, computed menggunakan Object.is untuk membandingkan nilai. Jika nilai terhitung baru sama dengan nilai lama, dependensi tidak diberi tahu sehingga pekerjaan yang tidak perlu dapat dihindari.

const value = signal(2);
const isEven = computed(() => value() % 2 === 0);

// value 2 -> 4 -> 6 all yield isEven() === true
// Dependents of isEven do NOT re-run on those changes

Fungsi Kesetaraan Kustom

Anda dapat memberikan opsi equal untuk mengatur kapan computed dianggap berubah — berguna untuk objek atau array.

const data = signal({ id: 1, name: 'A' });

const view = computed(
  () => data(),
  { equal: (a, b) => a.id === b.id }
);
// Dependents re-run only when the id changes

Hindari Efek Samping dalam computed

Computed harus murni: tanpa panggilan HTTP, tanpa pencatatan sebagai perilaku, dan tanpa mengubah sinyal lain. Efek samping seharusnya berada di dalam effect(). Menjaga computed tetap murni membuat grafik reaktif lebih mudah diprediksi.

computed vs Metode

Metode templat berjalan pada setiap siklus deteksi perubahan. Computed hanya berjalan ketika dependensinya berubah dan menyimpan hasilnya dalam cache — jauh lebih efisien untuk nilai turunan.

// Method: recalculates every CD cycle
getTotal() { return this.items().reduce((a, b) => a + b, 0); }

// Computed: memoized, runs only on item change
total = computed(() => this.items().reduce((a, b) => a + b, 0));

Pemeriksaan Singkat

Uji pemahaman Anda tentang sinyal terhitung.

Ringkasan: Sinyal Terhitung

Anda telah mempelajari bahwa computed() membuat sinyal turunan yang hanya dapat dibaca dengan pelacakan dependensi otomatis, evaluasi malas, dan memoisasi.

Jaga agar tetap murni — tanpa efek samping.
Sinyal tersebut dapat bergantung pada sinyal terhitung lainnya.
Gunakan equal untuk deteksi perubahan kustom.

Berikutnya: menjalankan efek samping dengan effect().

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Sinyal Terhitung” gratis?

Ya — teks lengkap “Sinyal Terhitung” 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 “Sinyal Terhitung”?

Turunkan nilai yang diperbarui secara otomatis. 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 1 dari 4.

Berapa lama pelajaran “Sinyal Terhitung” 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