fungsi jam tangan dalam Vue3: pantau perubahan data

Vue3 kini merupakan rangka kerja JavaScript yang popular, yang memudahkan proses pembangunan dan meningkatkan kecekapan pembangunan dan kualiti kod. Dalam Vue3, fungsi jam tangan boleh memantau perubahan data dengan mudah dan melaksanakan operasi yang sepadan Artikel ini akan memperkenalkan penggunaan asas dan langkah berjaga-jaga bagi fungsi jam tangan dalam Vue3.

1. Penggunaan asas fungsi jam tangan

Penggunaan fungsi jam tangan dalam Vue3 adalah berbeza daripada fungsi jam tangan dalam Vue3 dilaksanakan berdasarkan Proksi ES6, yang memberikan lebih fleksibiliti. kaedah pemantauan data. Dalam Vue3, kita boleh menggunakan fungsi jam tangan untuk memantau perubahan dalam satu data, atau kita boleh menggunakan fungsi jam tangan untuk memantau perubahan dalam berbilang data pada masa yang sama.

1. Memantau perubahan satu data

Memantau perubahan satu data adalah sangat mudah, hanya gunakan fungsi jam tangan dalam fungsi persediaan. Contohnya:

import { watch, ref } from 'vue'

export default {
  setup() {
    const name = ref('John')
    watch(name, (newValue, oldValue) => {
      console.log(`Name changed from ${oldValue} to ${newValue}`)
    })
    return {
      name
    }
  }
}

Dalam kod di atas, kami mentakrifkan nama pembolehubah jenis ref dan menggunakan fungsi jam tangan untuk memantau perubahannya. Apabila nilai nama berubah, fungsi jam tangan akan memberitahu kami dan mencetak maklumat yang berkaitan.

2. Memantau perubahan dalam berbilang data

Sama seperti memantau perubahan dalam satu data, memantau perubahan dalam berbilang data juga sangat mudah. Hanya gunakan fungsi jam tangan dalam fungsi persediaan dan lulus berbilang pembolehubah sebagai nama utama parameter pertamanya. Contohnya:

import { watch, ref } from 'vue'

export default {
  setup() {
    const name = ref('John')
    const age = ref(18)
    const height = ref(180)

    watch({ name, age, height }, (newValues, oldValues) => {
      console.log('Data changed', newValues, oldValues)
    })

    return {
      name,
      age,
      height
    }
  }
}

Dalam kod di atas, kami mentakrifkan tiga nama pembolehubah jenis ref, umur dan ketinggian serta menggunakan fungsi jam tangan dan menghantarnya sebagai objek untuk memantau perubahannya. Apabila nilai mana-mana daripada tiga pembolehubah ini berubah, fungsi jam tangan akan memberitahu kami dan menghantar nilai baharu dan nilai lama sebagai parameter fungsi panggil baliknya.

2. Nota mengenai fungsi jam tangan

Walaupun fungsi jam tangan sangat mudah, kami juga perlu memberi perhatian kepada beberapa butiran semasa menggunakannya.

1. Elakkan daripada mencetuskan terlalu kerap

Memandangkan fungsi jam tangan dilaksanakan berdasarkan Proksi, fungsi panggil balik akan dicetuskan setiap kali data berubah Jika data kerap berubah, watch Fungsi panggil balik fungsi juga akan dicetuskan secara berterusan, sekali gus menjejaskan prestasi kod. Oleh itu, apabila kita menggunakan fungsi jam tangan, kita harus cuba mengelakkan perubahan data yang terlalu kerap, atau menambah beberapa pemprosesan kelewatan dan operasi lain dalam fungsi panggil balik.

2. Mendengar perubahan dalam tatasusunan dan objek

Apabila kita perlu memantau perubahan dalam tatasusunan dan objek, kerana pelaksanaan asasnya berbeza daripada pembolehubah biasa, kita perlu menggunakan Vue menyediakan kaedah khas untuk pemantauan, seperti mendalam, segera, dsb. Dengan cara ini, kita boleh mendapatkan perubahan dalam tatasusunan dan objek dengan betul.

3. Gunakan fungsi watchEffect untuk menggantikan fungsi jam tangan

Selain fungsi jam tangan, Vue3 juga menyediakan fungsi watchEffect baharu, yang boleh memantau perubahan data responsif dengan lebih mudah dan secara automatik melaksanakan operasi yang sepadan. Jika kita hanya mahu memantau perubahan dalam data responsif, adalah disyorkan untuk menggunakan fungsi watchEffect.

Artikel ini terutamanya memperkenalkan penggunaan asas dan langkah berjaga-jaga bagi fungsi jam tangan dalam Vue3. Saya harap ia akan membantu semua orang. Apabila menggunakan fungsi jam tangan, kita harus mengikuti amalan pengekodan yang baik dan cuba mengelakkan penggunaan fungsi jam tangan yang berlebihan dan kerap mencetuskan fungsi panggil balik. Jika anda perlu memantau perubahan dalam tatasusunan dan objek, anda harus menggunakan kaedah khas yang disediakan oleh Vue. Pada masa yang sama, kami juga boleh menggunakan fungsi watchEffect untuk memantau perubahan dalam data responsif dengan lebih mudah.

Atas ialah kandungan terperinci fungsi jam tangan dalam Vue3: pantau perubahan data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!