Angular Academy · Pelajaran

Cara Pengesanan Perubahan Berfungsi

Fahami kitaran pengesanan perubahan Angular.

Pelajaran 1 daripada 413 langkah

Cara Pengesanan Perubahan Berfungsi ialah pelajaran Angular Academy percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Angular Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Angular Academy merangkumi sejumlah 4 pelajaran.

Apakah Pengesanan Perubahan?

Pengesanan perubahan ialah proses yang digunakan oleh Angular untuk memastikan DOM selaras dengan keadaan komponen anda. Apabila data berubah, Angular menilai semula pengikatan dan mengemas kini hanya perkara yang berbeza.

Kitaran Pengesanan

Angular merentasi pepohon komponen dari akar ke bawah sambil memeriksa pengikatan setiap komponen. Laluan dari atas ke bawah ini ialah satu kitaran pengesanan perubahan (detik).

Apakah yang Mencetuskan Detik?

Secara lalai, Angular menjalankan pengesanan perubahan selepas peristiwa tak segerak: peristiwa DOM, pemasa dan respons HTTP. Proses ini diselaraskan oleh Zone.js.

Zone.js

Zone.js menampal API tak segerak (setTimeout, addEventListener, Promise, XHR) supaya Angular mengetahui apabila salah satunya selesai dan detik mungkin diperlukan.

// Patched by Zone.js:
setTimeout(() => this.count++, 1000);
// After the timer, Angular runs change detection.

NgZone

NgZone membalut Zone.js untuk Angular. Anda boleh menjalankan kod di luar zon Angular bagi mengelakkan pengesanan perubahan tercetus untuk gelung panas.

private zone = inject(NgZone);

this.zone.runOutsideAngular(() => {
  // heavy work, no CD triggered
});

Memasuki Semula Zon

Untuk mengemas kini antara muka pengguna dari luar zon, masuk semula ke dalamnya dengan run supaya Angular menjadualkan detik.

this.zone.run(() => {
  this.ready = true;
});

Strategi Lalai

Dengan strategi lalai, setiap komponen diperiksa pada setiap detik. Cara ini mudah dan selamat, tetapi boleh membazirkan sumber dalam pepohon yang besar.

Perbandingan Pengikatan

Angular membandingkan nilai semasa setiap pengikatan dengan nilai sebelumnya menggunakan Object.is. Jika tiada perubahan, DOM tidak disentuh.

Ungkapan Hendaklah Tulen

Ungkapan templat dijalankan pada setiap pemeriksaan, jadi ungkapan itu mesti pantas dan bebas daripada kesan sampingan. Elakkan memanggil fungsi yang mahal secara langsung dalam templat.

<!-- Avoid: runs every tick -->
<p>{{ computeExpensiveTotal() }}</p>

ExpressionChangedAfterChecked

Dalam mod pembangunan, Angular menjalankan laluan pengesahan kedua. Jika nilai berubah antara kedua-dua laluan, anda mendapat ExpressionChangedAfterItHasBeenCheckedError, yang menandakan keadaan berubah semasa pemaparan.

Kawalan Manual

Suntik ChangeDetectorRef untuk mengawal pengesanan: markForCheck(), detectChanges() dan detach() memberikan kawalan terperinci.

private cdr = inject(ChangeDetectorRef);
this.cdr.detectChanges();

Semakan Pantas

Uji pemahaman anda tentang pengesanan perubahan.

Jawab dalam pelajaran interaktif

Imbas Kembali

Anda telah mempelajari bahawa pengesanan perubahan ialah laluan pepohon dari atas ke bawah yang menyegerakkan keadaan dengan DOM, dicetuskan oleh peristiwa tak segerak melalui Zone.js/NgZone, sambil membandingkan pengikatan menggunakan Object.is. ChangeDetectorRef memberikan kawalan manual.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 38
Pelajaran: 144

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Cara Pengesanan Perubahan Berfungsi” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Angular Academy, termasuk “Cara Pengesanan Perubahan Berfungsi”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Angular Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Cara Pengesanan Perubahan Berfungsi”?

Fahami kitaran pengesanan perubahan Angular. Anda berlatih Angular Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Angular Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Angular Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.

Berapa lamakah pelajaran “Cara Pengesanan Perubahan Berfungsi” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Angular Academy ini?

Ya. Setiap pelajaran Angular Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Angular Academy