Penjelasan terperinci tentang fungsi Vue.watch dan cara melaksanakan pemantauan data-View.js-php.cn

Penjelasan terperinci tentang fungsi Vue.watch dan cara melaksanakan pemantauan data

王林

Lepaskan： 2023-07-25 08:57:14

asal

1206 orang telah melayarinya

Penjelasan terperinci tentang fungsi Vue.watch dan cara melaksanakan pemantauan data

Vue.js, sebagai rangka kerja JavaScript yang popular, menyediakan pelbagai fungsi yang mudah untuk membantu kami membina aplikasi bahagian hadapan yang interaktif. Salah satu fungsi yang sangat penting ialah pemantauan data, iaitu, apabila data berubah, kita boleh melakukan operasi tertentu. Fungsi Vue.watch ialah kaedah yang digunakan untuk melaksanakan pemantauan data.

Fungsi Vue.watch ditakrifkan seperti berikut:

vm.$watch(expOrFn, callback, [options])

Salin selepas log masuk

di mana vm mewakili tika Vue, expOrFn mewakili sifat atau fungsi yang perlu dipantau, panggil balik mewakili fungsi panggil balik apabila sifat yang dipantau berubah, dan pilihan mewakili beberapa pilihan konfigurasi tambahan.

Penggunaan fungsi Vue.watch boleh dibahagikan kepada dua situasi: memantau harta dan memantau fungsi.

Mendengar harta
Untuk menggambarkan dengan contoh mudah, kami mencipta tika Vue, mentakrifkan nama sifat dalam data, dan kemudian menggunakan fungsi jam tangan untuk mendengar perubahan dalam nama.

<body>
 <div id="app">
     <p>{{ name }}</p>
 </div>
 <script>
     var vm = new Vue({
         el: '#app',
         data: {
             name: 'John'
         },
         watch: {
             name: function(newName, oldName) {
                 console.log('name变为：' + newName);
             }
         }
     });
     vm.name = 'Tom';  // 控制台输出：name变为：Tom
 </script>
</body>

Salin selepas log masuk

Dalam contoh ini, apabila atribut nama berubah, fungsi jam tangan akan dicetuskan, menghantar dua parameter: nilai baharu dan nilai lama. Cetak nilai nama baharu dalam konsol.

Mendengar fungsi
Selain memantau perubahan dalam hartanah, kita juga boleh memantau perubahan dalam fungsi. Dalam contoh berikut, kami mentakrifkan fungsi getFullName dalam data dan menggunakan fungsi jam tangan untuk memantau perubahan dalam getFullName.
```
<body>
 <div id="app">
     <p>{{ getFullName() }}</p>
 </div>
 <script>
     var vm = new Vue({
         el: '#app',
         data: {
             firstName: 'John',
             lastName: 'Doe'
         },
         methods: {
             getFullName: function() {
                 return this.firstName + ' ' + this.lastName;
             }
         },
         watch: {
             getFullName: function(newVal, oldVal) {
                 console.log('getFullName变为：' + newVal);
             }
         }
     });
     vm.lastName = 'Smith';  // 控制台输出：getFullName变为：John Smith
 </script>
</body>
```
Salin selepas log masuk
Dalam contoh ini, apabila sifat bergantung dalam fungsi getFullName berubah, fungsi jam tangan akan dicetuskan.

Selain contoh di atas, fungsi Vue.watch mempunyai beberapa pilihan konfigurasi tambahan, seperti deep dan serta-merta. Pilihan dalam digunakan untuk memantau secara mendalam objek bersarang, dan pilihan segera menunjukkan sama ada untuk mencetuskan fungsi panggil balik dengan segera.

Melalui fungsi Vue.watch, kami boleh memantau data dengan mudah dan melakukan operasi berkaitan apabila data berubah. Ini sangat membantu untuk membina aplikasi bahagian hadapan interaktif yang kompleks.

Ringkasan: Fungsi Vue.watch ialah kaedah yang digunakan untuk melaksanakan pemantauan data dalam rangka kerja Vue.js. Melalui fungsi ini, kita boleh memantau perubahan dalam sifat atau fungsi dan melaksanakan operasi yang berkaitan apabila perubahan berlaku. Menggunakan fungsi ini, anda boleh memantau dan memproses data dengan mudah, menyediakan cara yang mudah untuk membina aplikasi bahagian hadapan yang interaktif.
Atas ialah kandungan terperinci Penjelasan terperinci tentang fungsi Vue.watch dan cara melaksanakan pemantauan data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!