Cara menggunakan watch() dalam vue3

Vue.js 3 ialah rangka kerja JavaScript popular yang menyediakan kaedah watch() untuk memantau perubahan dalam data komponen.

1. Penggunaan jam tangan() dalam Vue3

Dalam Vue.js 3, kaedah jam tangan() boleh digunakan untuk memantau data tunggal, berbilang data dan mendapatkan nilai baharu dan lama. Berikut ialah penggunaan asas jam tangan():

import { watch, ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    watch(count, (newVal, oldVal) => {
      console.log(`New: ${newVal}, Old: ${oldVal}`)
    })

    return {
      count
    }
  }
}

Dalam kod di atas, kami mentakrifkan pembolehubah jenis ref count dan menggunakan kaedah watch() untuk memantau perubahan dalam pembolehubah count. Apabila nilai pembolehubah count berubah, fungsi panggil balik watch() akan dilaksanakan, menghantar nilai baharu dan nilai lama sebagai parameter kepada fungsi.

Selain memantau pembolehubah tunggal, watch() juga boleh memantau perubahan dalam berbilang pembolehubah dan mendapatkan nilai lama/baharu.

Pemantauan berbilang pembolehubah:

watch(
  [count1, count2],
  ([newCount1, newCount2], [oldCount1, oldCount2]) => {
    console.log(
      `New count1: ${newCount1}, Old count1: ${oldCount1},
      New count2: ${newCount2}, Old count2: ${oldCount2}`
    )
  }
)

Dapatkan nilai lama dan baharu:

watch(
  [count1, count2],
  ([newCount1, newCount2], [oldCount1, oldCount2]) => {
    console.log(`New count1: ${newCount1}, Old count1: ${oldCount1}`)
    console.log(`New count2: ${newCount2}, Old count2: ${oldCount2}`)
  },
  { deep: true }
)

Dalam contoh ini, kami menghantar objek pilihan untuk membolehkan pemantauan mendalam. Pendekatan ini boleh menjadikan kes pembolehubah yang dipantau oleh watch() lebih besar dan lebih kompleks.

2 Peranan jam tangan() dalam Vue3

watch()Kaedah ini memainkan peranan yang sangat penting dalam Vue.js 3. Ia boleh membantu kami memantau perubahan data dan melaksanakan beberapa permintaan tugasan.

Sebagai contoh, dalam pembangunan bahagian hadapan, kami sering menghadapi situasi memantau kotak input pengguna Apabila kandungan input pengguna berubah, kami perlu mengemas kini dan memaparkan kandungan yang berkaitan dalam masa nyata. Contohnya, apabila kandungan kotak input kosong, komponen disembunyikan, dan apabila kandungan kotak input tidak kosong, komponen dipaparkan.

import { watch, ref } from 'vue'

export default {
  setup() {
    const userInput = ref('')
    const showComponent = ref(false)

    watch(userInput, (newVal) => {
      if (newVal === '') {
        showComponent.value = false
      } else {
        showComponent.value = true
      }
    })

    return {
      userInput,
      showComponent
    }
  }
}

Dalam kod di atas, kami memantau perubahan kotak input pengguna dan memaparkan/menyembunyikan komponen mengikut nilai kotak input pengguna. Kaedah

watch() juga boleh melaksanakan fungsi yang lebih kompleks, seperti mendapatkan data secara tidak segerak dan memaparkan semula halaman apabila data dikemas kini.

3. Kaedah pemantauan yang baru diperkenalkan watchEffect dalam Vue3

Dalam Vue.js 3, kaedah watchEffect() telah diperkenalkan. Kaedah watchEffect() berkelakuan serupa dengan kaedah watch(), tetapi tidak memberikan akses kepada nilai lama dan baharu. Ia boleh melaksanakan fungsi panggil balik secara automatik apabila data berubah.

import { watchEffect, ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    watchEffect(() => {
      console.log(`Count is: ${count.value}`)
    })

    return {
      count
    }
  }
}

Dalam kod di atas, kami mentakrifkan pembolehubah count dan menggunakan kaedah watchEffect() untuk mendengar perubahan dalam pembolehubah. Apabila nilai pembolehubah count berubah, fungsi panggil balik watchEffect() akan dilaksanakan.

Atas ialah kandungan terperinci Cara menggunakan watch() dalam vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!