Vue Academy · Pelajaran

Computed dan Watch dalam Composition API

computed() untuk keadaan terbitan, watch() dan watchEffect() untuk kesan sampingan.

Pelajaran 4 daripada 413 langkah

Computed dan Watch dalam Composition API ialah pelajaran Vue Academy percuma di CoddyKit. Ini ialah pelajaran 4 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 Vue Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Vue Academy merangkumi sejumlah 4 pelajaran.

Menerbitkan dan Bertindak Balas terhadap Keadaan

Keadaan reaktif hanyalah separuh daripada keseluruhan cerita. Anda juga perlu menerbitkan nilai baharu daripadanya dan bertindak balas terhadap perubahan. Composition API menawarkan computed, watch dan watchEffect untuk tujuan ini.

computed untuk Nilai Terbitan

computed() menerima fungsi pengambil dan mengembalikan ref yang nilainya diterbitkan daripada keadaan reaktif yang lain. Aksesnya dengan .value dalam JS; dalam templat, ia dinyahbungkus.

import { ref, computed } from 'vue'

const count = ref(2)
const doubled = computed(() => count.value * 2)
console.log(doubled.value) // 4

computed Bersifat Tertunda dan Dicache

Computed hanya mengira semula apabila salah satu kebergantungan reaktifnya berubah. Jika anda membacanya sepuluh kali tanpa perubahan, pengambil berjalan sekali dan hasil yang dicache digunakan semula.

Ini menjadikan computed sesuai untuk pengiraan terbitan yang mahal.

computed Dikemas Kini Secara Automatik

Ubah suatu kebergantungan dan computed akan dikemas kini pada kali berikutnya ia dibaca. Anda tidak perlu memanggilnya secara manual.

const count = ref(2)
const doubled = computed(() => count.value * 2)
count.value = 5
console.log(doubled.value) // 10

watch untuk Kesan Sampingan

watch() memerhatikan sumber reaktif dan menjalankan panggilan balik apabila sumber itu berubah. Panggilan balik menerima nilai baharu dan nilai lama.

import { ref, watch } from 'vue'

const count = ref(0)
watch(count, (newVal, oldVal) => {
  console.log('changed from', oldVal, 'to', newVal)
})

watch Bersifat Tertunda Secara Lalai

Tidak seperti computed, watch tidak menjalankan panggilan baliknya serta-merta. Ia menunggu perubahan pertama. Gunakannya untuk kesan sampingan: pengelogan, mendapatkan data dan menyimpan ke storan.

Memerhatikan Berbilang Sumber

Hantar tatasusunan sumber untuk memerhatikan beberapa nilai serentak. Panggilan balik menerima tatasusunan nilai baharu dan lama.

watch([count, name], ([newCount, newName], [oldCount, oldName]) => {
  console.log(newCount, newName)
})

Memerhatikan Fungsi Pengambil

Untuk memerhatikan sifat objek reaktif, hantarkan fungsi pengambil. Memerhatikan objek secara terus hanya dicetuskan oleh perubahan mendalam, yang mungkin mengejutkan.

const state = reactive({ count: 0 })
watch(() => state.count, (newVal) => {
  console.log('count is', newVal)
})

watchEffect: Tegas dan Menjejak Secara Automatik

watchEffect() menjalankan fungsinya serta-merta dan menjalankannya semula apabila apa-apa nilai reaktif yang digunakan di dalamnya berubah. Anda tidak menyenaraikan kebergantungan — semuanya dijejak secara automatik.

import { ref, watchEffect } from 'vue'

const count = ref(0)
watchEffect(() => {
  console.log('count is', count.value)
})
// logs immediately, then on every change

watch berbanding watchEffect

watch: sumber yang jelas, tertunda dan memberikan nilai lama serta baharu.
watchEffect: menjejak kebergantungan secara automatik, berjalan dengan segera dan tidak mempunyai akses kepada nilai lama.

Gunakan watch apabila anda memerlukan nilai sebelumnya atau mahukan kawalan yang tepat. Gunakan watchEffect untuk kesan sampingan reaktif yang ringkas.

computed berbanding watch

Gunakan computed apabila anda mahukan nilai terbitan baharu. Gunakan watch atau watchEffect apabila anda mahu melakukan tindakan sebagai tindak balas terhadap perubahan. Jangan gunakan watch untuk mengira semula nilai — itulah kegunaan computed.

Semakan Ringkas

Pilih pembantu reaktif yang tepat.

Jawab dalam pelajaran interaktif

Ringkasan

Anda kini tahu cara menerbitkan nilai dan bertindak balas:

computed mencipta nilai terbitan yang malas dan dicache.
watch bertindak balas terhadap sumber tertentu serta memberikan nilai baharu dan lama; ia berjalan secara malas.
watchEffect berjalan serta-merta dan menjejaki kebergantungan secara automatik.
Gunakan computed untuk nilai, dan watch/watchEffect untuk kesan sampingan.

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: 42
Pelajaran: 156

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Computed dan Watch dalam Composition API” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Vue Academy, termasuk “Computed dan Watch dalam Composition API”, 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 Vue Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Computed dan Watch dalam Composition API”?

computed() untuk keadaan terbitan, watch() dan watchEffect() untuk kesan sampingan. Anda berlatih Vue 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 Vue Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Vue 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 4 daripada 4.

Berapa lamakah pelajaran “Computed dan Watch dalam Composition API” 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 Vue Academy ini?

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

Mengapa Composition API?
Fungsi setup() dan Pemboleh Ubah Reaktif
ref berbanding reactive: Bila Menggunakan Setiapnya
Computed dan Watch dalam Composition API

← Kembali ke Vue Academy