Cara menggunakan jam tangan dalam Vue untuk memantau perubahan dalam berbilang data

Vue ialah rangka kerja JavaScript popular yang menyediakan mekanisme pengikatan data yang sangat berguna. Objek jam tangan dalam Vue ialah ciri yang sangat penting, ia boleh membantu kami memantau perubahan dalam satu atau berbilang data. Artikel ini akan membincangkan cara menggunakan objek jam tangan dalam Vue untuk memantau perubahan dalam berbilang data.

Pertama sekali, kita perlu memahami apakah objek jam tangan dalam Vue. Objek jam tangan ialah pilihan yang digunakan dalam komponen Vue untuk memantau perubahan data. Kita boleh menggunakan pilihan jam tangan untuk melihat nilai ungkapan Apabila nilai ungkapan berubah, jam tangan akan secara automatik melaksanakan fungsi panggil balik yang sepadan. Dalam Vue, kita boleh menentukan objek jam tangan sebagai rentetan, fungsi atau objek. Dalam artikel ini, kami akan menggunakan objek untuk menentukan pilihan jam tangan.

Andaikan kita mempunyai komponen Vue dengan dua sifat data: mesej dan kiraan. Kami ingin mendengar perubahan dalam kedua-dua data ini dan mengemas kini elemen yang sepadan pada halaman. Mula-mula, kita perlu menambah objek jam tangan dalam pilihan komponen:

Vue.component('my-component', {
  data: function () {
    return {
      message: 'Hello',
      count: 0
    }
  },
  watch: {
    message: function (newVal, oldVal) {
      console.log('message changed from ' + oldVal + ' to ' + newVal)
    },
    count: function (newVal, oldVal) {
      console.log('count changed from ' + oldVal + ' to ' + newVal)
    }
  },
  template: '<div>{{ message }} {{ count }}</div>'
})

Dalam kod di atas, kami menambah objek jam tangan dalam pilihan komponen Vue. Objek jam tangan ini mempunyai dua atribut, masing-masing sepadan dengan mesej dan mengira atribut data. Setiap harta mempunyai fungsi tanpa nama sebagai nilainya. Kedua-dua fungsi ini akan dipanggil apabila atribut data yang sepadan berubah. Kedua-dua fungsi menerima dua parameter: nilai baharu dan nilai lama. Kita boleh melaksanakan mana-mana kod yang kita mahu dalam fungsi ini. Dalam contoh di atas, kami hanya mencetak mesej ke konsol.

Kami juga boleh menggunakan pilihan jam tangan mendalam untuk memantau berbilang lapisan data. Pemantauan mendalam dalam Vue bermakna panggilan balik jam tangan hanya akan dicetuskan apabila nilai objek atau sifat tatasusunan berubah. Dalam Vue, secara lalai, hanya satu lapisan perubahan data boleh dikesan. Jika anda perlu memantau perubahan dalam data berbilang lapisan dalam objek jam tangan, anda perlu menambah aksara kedalaman ($) pada nama atribut.

Vue.component('my-component', {
  data: function () {
    return {
      person: {
        name: 'Bob',
        age: 30
      }
    }
  },
  watch: {
    'person.name': {
      handler: function (newVal, oldVal) {
        console.log('person.name changed from ' + oldVal + ' to ' + newVal)
      },
      deep: true
    },
    'person.age': {
      handler: function (newVal, oldVal) {
        console.log('person.age changed from ' + oldVal + ' to ' + newVal)
      },
      deep: true
    }
  },
  template: '<div>{{ person.name }} {{ person.age }}</div>'
})

Dalam contoh ini, kami memantau perubahan dalam nama dan atribut umur objek orang itu. Memandangkan objek orang ialah objek bersarang, kita perlu menambah aksara kedalaman sebelum nama atribut supaya Vue boleh memantau perubahan dalam atribut ini dengan mendalam.

Dalam artikel ini, kami memperkenalkan cara menggunakan objek jam tangan dalam Vue untuk memantau perubahan dalam berbilang data. Kami membincangkan cara menggunakan pilihan jam tangan untuk melihat perubahan dalam sekeping data dan cara menggunakan pilihan jam tangan dalam untuk melihat perubahan pada objek atau harta tatasusunan. Dalam Vue, jam tangan ialah ciri yang sangat praktikal, yang membolehkan kami memantau perubahan data dengan mudah dan melakukan operasi yang sepadan.

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