Cara menggunakan jam tangan untuk memantau perubahan dalam objek dalam Vue

Vue.js ialah rangka kerja bahagian hadapan yang popular, dan salah satu konsep terasnya ialah "pengikatan data responsif". Apabila atribut data dalam komponen berubah, Vue.js akan mengemas kini antara muka UI secara automatik. Walau bagaimanapun, kadangkala kita perlu melakukan beberapa operasi tertentu apabila data berubah Dalam kes ini, kita boleh menggunakan fungsi jam tangan dalam Vue.

Dalam Vue, jam tangan ialah pilihan yang boleh digunakan untuk mendengar perubahan dalam objek dan melaksanakan fungsi yang sepadan. Dalam artikel ini, kami akan memperkenalkan cara menggunakan jam tangan untuk memantau perubahan dalam objek.

Pertama, kita perlu mengisytiharkan sifat satu atau lebih objek dalam komponen Vue. Sebagai contoh, kami mengisytiharkan objek bernama "pengguna" yang termasuk sifat "nama" dan "umur":

data() {
  return {
    user: {
      name: 'Alice',
      age: 30
    }
  }
}

Seterusnya, kami perlu mencipta pilihan jam tangan dalam sifat jam tangan komponen untuk Memantau perubahan dalam sifat objek . Sebagai contoh, kita boleh mendengar sifat "umur" objek "pengguna":

watch: {
  'user.age'(newValue, oldValue) {
    console.log(`User's age changed from ${oldValue} to ${newValue}`);
  }
}

Dalam kod di atas, kami mencipta fungsi yang dipanggil "watcher" yang mengandungi dua parameter: "newValue" dan "oldValue ". Parameter ini akan mengandungi nilai baharu dan lama bagi harta tersebut supaya kita boleh membandingkan antaranya dan melakukan tindakan yang sesuai. Sebagai contoh, kami mencetak mesej dalam fungsi yang menunjukkan bahawa sifat "umur" objek "pengguna" telah berubah.

Perlu diambil perhatian bahawa kami menggunakan bentuk rentetan "user.age" untuk memantau atribut "umur" objek "pengguna". Ini kerana sifat objek biasanya reaktif, jadi Vue akan menukar nama sifat objek kepada laluan kemas kini reaktif. Dalam kes ini, kita perlu menggunakan bentuk rentetan untuk mendengar perubahan dalam sifat objek.

Selain memantau perubahan dalam sifat objek, kami juga boleh memantau perubahan dalam keseluruhan objek. Sebagai contoh, kita boleh menggunakan kod berikut untuk mendengar sebarang perubahan dalam objek "pengguna":

watch: {
  user: {
    handler(newValue, oldValue) {
      console.log('User object changed:', newValue);
    },
    deep: true
  }
}

Dalam kod di atas, kami telah mencipta fungsi "pengendali" yang akan dipanggil setiap kali "pengguna" perubahan objek. Sama seperti contoh pertama, kami menghantar nilai baru dan lama sebagai parameter fungsi dan mencetak mesej dalam fungsi.

Selain itu, kami juga menetapkan pilihan "deep" kepada benar untuk mendengar dengan mendalam perubahan objek. Ini bermakna Vue akan mendengar secara rekursif perubahan dalam nilai objek bersarang.

Akhir sekali, kita perlu mengubah suai nilai objek "pengguna" untuk mencetuskan fungsi jam tangan. Sebagai contoh, kita boleh menggunakan kod berikut untuk menambah sifat "umur" objek "pengguna":

this.user.age += 1;

Apabila kita menjalankan kod di atas, fungsi jam tangan akan dipanggil dan mesej yang sepadan akan dicetak keluar dalam konsol.

Ringkasan: Dalam Vue, kita boleh menggunakan pilihan jam tangan untuk mendengar perubahan dalam objek dan melaksanakan fungsi yang sepadan. Ini membolehkan kami melakukan tindakan tertentu apabila data berubah, seperti mengemas kini UI atau menghantar permintaan HTTP. Apabila kami menggunakan jam tangan, kami perlu memastikan data diubah suai pada masa yang sesuai untuk mencetuskan fungsi jam tangan.

Atas ialah kandungan terperinci Cara menggunakan jam tangan untuk memantau perubahan dalam objek dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!