Apakah ciri watchEffect dalam Vue3

watchEffect ialah ciri baharu yang disediakan dalam Vue3, yang digunakan untuk memantau perubahan dalam data responsif dan melaksanakan fungsi panggil balik yang ditentukan apabila data berubah.

berbeza daripada watch dalam Vue2 watchEffect tidak perlu menentukan data untuk dipantau sebaliknya, ia akan menjejaki data reaktif yang digunakan dalam fungsi dan melaksanakan semula fungsi panggil balik apabila perubahan data ini. Ciri penjejakan automatik ini boleh memudahkan kod dan meningkatkan prestasi aplikasi.

Berikut ialah contoh penggunaan watchEffect:

import { watchEffect, reactive } from 'vue'
const state = reactive({
  count: 0
})
watchEffect(() => {
  console.log(state.count)
})

Dalam kod di atas, kami mencipta objek reaktif reactive menggunakan fungsi state dan menggunakan watchEffect Memantau perubahan atribut state.count. Apabila state.count berubah, fungsi panggil balik akan dilaksanakan semula.

Perlu diingat bahawa watchEffect mengembalikan fungsi pendengar yang tidak perlu dihentikan. Jika anda perlu berhenti mendengar, anda boleh memanggil fungsi pendengar ini untuk berhenti mendengar.

Selain memantau perubahan dalam data responsif, watchEffect juga menyokong mengakses konteks komponen dalam fungsi panggil balik, seperti kata kunci this dan sifat pengiraan komponen.

Berikut ialah contoh penggunaan watchEffect untuk mengakses sifat pengiraan komponen:

import { watchEffect, computed } from 'vue'
export default {
  computed: {
    doubleCount () {
      return this.count * 2
    }
  },
  mounted () {
    watchEffect(() => {
      console.log(this.doubleCount)
    })
  }
}

Dalam kod di atas, kami mencipta sifat terkira computed menggunakan fungsi doubleCount dan mounted digunakan dalam fungsi cangkuk untuk memantau perubahan watchEffect. Apabila doubleCount berubah, fungsi panggil balik akan dilaksanakan semula. doubleCount

Atas ialah kandungan terperinci Apakah ciri watchEffect dalam Vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!