Dalam vue, jam tangan digunakan untuk memantau sama ada data dalam data telah diubah suai Setelah diubah suai, ia boleh melakukan beberapa operasi lain. Tonton ialah kaedah umum yang disediakan secara dalaman oleh Vue untuk fungsi mendengar Ia boleh bertindak balas kepada perubahan data dan memacu beberapa operasi melalui perubahan data tertentu.
Persekitaran pengendalian tutorial ini: sistem windows7, versi vue3, komputer DELL G3.
Untuk apa jam tangan itu digunakan?
Vue menyediakan kaedah yang lebih umum untuk bertindak balas terhadap perubahan data melalui pilihan jam tangan. Pendekatan ini paling berguna apabila anda perlu melakukan operasi tak segerak atau mahal apabila data berubah.
Apakah itu jam tangan?
Sesuatu objek, kuncinya ialah ungkapan yang perlu diperhatikan dan nilainya ialah fungsi panggil balik yang sepadan. Nilai juga boleh menjadi nama kaedah atau objek yang mengandungi pilihan. Contoh Vue akan memanggil $watch() apabila dibuat instantiated, merentasi setiap sifat objek jam tangan. Pemindahan fail
Contoh:
<template>
<el-card class="box-card"><el-input v-model="name" style="width: 30%;"></el-input></el-card>
</template>
<script>
export default {
data() {
return {
name: '123'
};
}
};
</script>
<style></style>
Cara menggunakan jam tangan
Kaedah pertama: Penggunaan konvensional
(1) Anggap nilai nama untuk dipantau sebagai nama kaedah untuk dipantau. [Cara penulisan pertama]
<template>
<el-card class="box-card"><el-input v-model="name" style="width: 30%;"></el-input></el-card>
</template>
<script>
export default {
data() {
return {
name: '123'
};
},
watch: {
name(newVal, oldVal) {
console.log('newVal', newVal);// 1234
console.log('oldVal', oldVal);// 123
}
}
};
</script>
<style></style>(2) Anggap nilai nama untuk dipantau sebagai objek dan gunakan kaedah penangan untuk memantau. [Cara penulisan kedua]
<template>
<el-card class="box-card"><el-input v-model="name" style="width: 30%;"></el-input></el-card>
</template>
<script>
export default {
data() {
return {
name: '123'
};
},
watch: {
name:{
handler(newVal,oldVal){
console.log('newVal',newVal); // 1234
console.log('oldVal',oldVal); // 123
}
}
}
};
</script>
<style></style>Dua cara penulisan di atas adalah penggunaan biasa pendengar jam tangan. Satu ciri penggunaan ini ialah apabila nilai terikat buat kali pertama, ia akan bukan Jalankan fungsi mendengar, yang hanya akan dilaksanakan apabila nilai berubah. Jika kita perlu melaksanakan fungsi mendengar apabila nilai pada mulanya terikat, kita perlu menggunakan atribut segera.
Sekarang, mari bercakap tentang penggunaan yang lebih maju.
Kedua: Penggunaan lanjutan
Sebagai contoh, apabila komponen induk memindahkan nilai secara dinamik ke komponen anak, prop komponen anak diperolehi daripada komponen induk buat kali pertama Apabila nilai lalai digunakan, fungsi itu juga perlu dilaksanakan Dalam kes ini, atribut segera perlu ditetapkan kepada benar dan digunakan dalam kombinasi dengan kaedah pengendali.
Apabila atribut segera ditetapkan kepada benar, ia akan mendengar pada setiap masa tanpa mengira sama ada nilai berubah
Apabila atribut segera ditetapkan kepada palsu, dalam penggunaan biasa, ia akan mendengar; hanya apabila nilai berubah.
<template>
<el-card class="box-card"><el-input v-model="name" style="width: 30%;"></el-input></el-card>
</template>
<script>
export default {
data() {
return {
name: '123'
};
},
watch: {
name: {
handler(newVal, oldVal) {
console.log('newVal', newVal);
console.log('oldVal', oldVal);
},
immediate: true
}
}
};
</script>
<style></style>Laksanakan segera:
Apabila nilai berubah:
Tiga jenis: Penggunaan super lanjutan (pemantauan mendalam)
(1) Anda boleh menggunakan dua kaedah di atas untuk memantau perubahan dalam pembolehubah biasa, tetapi ia tidak berfungsi apabila nilai pembolehubah dipantau sebagai sesuatu objek.
Sebagai contoh, jika kita memantau perubahan dalam sifat dalaman objek bentuk, kita tidak boleh memantaunya.
<template>
<el-card class="box-card"><el-input v-model="form.name" style="width: 30%;"></el-input></el-card>
</template>
<script>
export default {
data() {
return {
form: {
name: '123'
}
};
},
watch: {
form: {
handler(newVal, oldVal) {
console.log('newVal', newVal);
console.log('oldVal', oldVal);
}
}
}
};
</script>
<style></style>Kemudian, berdasarkan keputusan, kami tidak melihat sebarang cetakan keluaran, jadi kaedah jam tangan biasa tidak dapat memantau perubahan dalam sifat dalaman objek.
Jadi, apakah yang perlu kita lakukan untuk memantau perubahan dalam sifat dalaman objek?
Kaedah jam tangan menyediakan atribut mendalam (pemantauan mendalam), yang boleh memantau perubahan dalam atribut dalaman objek.
<template>
<el-card class="box-card"><el-input v-model="form.name" style="width: 30%;"></el-input></el-card>
</template>
<script>
export default {
data() {
return {
form: {
name: '123'
}
};
},
watch: {
form: {
handler(newVal, oldVal) {
console.log('newVal', newVal);
console.log('oldVal', oldVal);
},
deep: true
}
}
};
</script>
<style></style>Tetapkan dalam: benar untuk memantau perubahan dalam borang Jika borang mempunyai lebih banyak atribut, semua atribut borang akan menjadi Dengan pendengar ini, pengendali akan dilaksanakan setiap kali nilai atribut berubah.
Apabila nilai atribut dalam adalah benar, anda boleh memantau perubahan dalam atribut objek
Apabila nilai atribut dalam adalah palsu, anda tidak boleh memantaunya.
(2) Jika kita hanya perlu memantau nilai atribut tertentu dalam objek, kita boleh menggunakan: borang rentetan untuk memantau atribut objek ,
ini Semasa proses pemantauan, anda tidak perlu menggunakan dalam untuk memantau secara mendalam, anda boleh memantau perubahan dalam atribut tertentu dalam objek.
<template>
<el-card class="box-card"><el-input v-model="form.name" style="width: 30%;"></el-input></el-card>
</template>
<script>
export default {
data() {
return {
form: {
name: '123'
}
};
},
watch: {
'form.name': {
handler(newVal, oldVal) {
console.log('newVal', newVal);
console.log('oldVal', oldVal);
}
}
}
};
</script>
<style></style>Jenis keempat: pengembangan (susunan mendengar)
(1) (satu dimensi, berbilang dimensi ) Perubahan tatasusunan tidak memerlukan pemantauan mendalam
<template>
<el-card class="box-card"><el-input v-model="name" @input="inputFn" style="width: 30%;"></el-input></el-card>
</template>
<script>
export default {
data() {
return {
name: '123',
arr1: [1, 2, 3],
arr2: [1, 2, 3, [4, 5]]
};
},
watch: {
arr1(newVal, oldVal) {
console.log('newVal1', newVal);
console.log('oldVal1', oldVal);
},
arr2(newVal, oldVal) {
console.log('newVal2', newVal);
console.log('oldVal2', oldVal);
}
},
methods: {
inputFn(e) {
this.arr1.push(e);
this.arr2.push(e);
}
}
};
</script>
<style></style>（2）数组对象中对象属性变化监测需要使用deep:true深度监听，多少层内产生变化都可以监测到。
<template>
<el-card class="box-card"><el-input v-model="name" @input="inputFn" style="width: 30%;"></el-input></el-card>
</template>
<script>
export default {
data() {
return {
name: '123',
arr1: [
{
id: 1,
sex: 11
}
],
arr2: [
{
id: 2,
sex: 22,
list: [
{
id: 3,
sex: 33
}
]
}
]
};
},
watch: {
arr1: {
handler(newVal, oldVal) {
console.log('newVal1', newVal);
console.log('oldVal1', oldVal);
},
deep: true
},
arr2: {
handler(newVal, oldVal) {
console.log('newVal2', newVal);
console.log('oldVal2', oldVal);
},
deep: true
}
},
methods: {
inputFn(e) {
this.arr1[0].sex = e;
this.arr2[0].list[0].sex = e;
}
}
};
</script>
<style></style>
Atas ialah kandungan terperinci Apakah fungsi jam tangan vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
