Rumah  >  Artikel  >  hujung hadapan web  >  Apakah fungsi jam tangan vue?

Apakah fungsi jam tangan vue?

青灯夜游
青灯夜游asal
2022-11-30 20:29:513580semak imbas

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.

Apakah fungsi jam tangan vue?

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: &#39;123&#39;
		};
	}
};
</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><el-input></el-input></el-card>
</template>

<script>
export default {
	data() {
		return {
			name: &#39;123&#39;
		};
	},
	watch: {
		name(newVal, oldVal) {
			console.log(&#39;newVal&#39;, newVal);// 1234
			console.log(&#39;oldVal&#39;, oldVal);// 123
		}
	}
};
</script>

<style></style>

Apakah fungsi jam tangan vue?

(2) Anggap nilai nama untuk dipantau sebagai objek dan gunakan kaedah penangan untuk memantau. [Cara penulisan kedua]

<template>
	<el-card><el-input></el-input></el-card>
</template>

<script>
export default {
	data() {
		return {
			name: &#39;123&#39;
		};
	},
	watch: {
		name:{
			handler(newVal,oldVal){
				console.log(&#39;newVal&#39;,newVal); // 1234
				console.log(&#39;oldVal&#39;,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><el-input></el-input></el-card>
</template>

<script>
export default {
	data() {
		return {
			name: &#39;123&#39;
		};
	},
	watch: {
		name: {
			handler(newVal, oldVal) {
				console.log(&#39;newVal&#39;, newVal);
				console.log(&#39;oldVal&#39;, oldVal);
			},
			immediate: true
		}
	}
};
</script>

<style></style>

Laksanakan segera:

Apakah fungsi jam tangan vue?

Apabila nilai berubah:

Apakah fungsi jam tangan vue?

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><el-input></el-input></el-card>
</template>

<script>
export default {
	data() {
		return {
			form: {
				name: &#39;123&#39;
			}
		};
	},
	watch: {
		form: {
			handler(newVal, oldVal) {
				console.log(&#39;newVal&#39;, newVal);
				console.log(&#39;oldVal&#39;, oldVal);
			}
		}
	}
};
</script>

<style></style>

Apakah fungsi jam tangan vue?

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><el-input></el-input></el-card>
</template>

<script>
export default {
	data() {
		return {
			form: {
				name: &#39;123&#39;
			}
		};
	},
	watch: {
		form: {
			handler(newVal, oldVal) {
				console.log(&#39;newVal&#39;, newVal);
				console.log(&#39;oldVal&#39;, oldVal);
			},
			deep: true
		}
	}
};
</script>

<style></style>

Apakah fungsi jam tangan vue?

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><el-input></el-input></el-card>
</template>

<script>
export default {
	data() {
		return {
			form: {
				name: &#39;123&#39;
			}
		};
	},
	watch: {
		&#39;form.name&#39;: {
			handler(newVal, oldVal) {
				console.log(&#39;newVal&#39;, newVal);
				console.log(&#39;oldVal&#39;, oldVal);
			}
		}
	}
};
</script>

<style></style>

Apakah fungsi jam tangan vue?

Jenis keempat: pengembangan (susunan mendengar)

(1) (satu dimensi, berbilang dimensi ) Perubahan tatasusunan tidak memerlukan pemantauan mendalam

<template>
	<el-card><el-input></el-input></el-card>
</template>

<script>
export default {
	data() {
		return {
			name: &#39;123&#39;,
			arr1: [1, 2, 3],
			arr2: [1, 2, 3, [4, 5]]
		};
	},
	watch: {
		arr1(newVal, oldVal) {
			console.log(&#39;newVal1&#39;, newVal);
			console.log(&#39;oldVal1&#39;, oldVal);
		},
		arr2(newVal, oldVal) {
			console.log(&#39;newVal2&#39;, newVal);
			console.log(&#39;oldVal2&#39;, oldVal);
		}
	},
	methods: {
		inputFn(e) {
			this.arr1.push(e);
			this.arr2.push(e);
		}
	}
};
</script>

<style></style>

Apakah fungsi jam tangan vue?

 (2)数组对象中对象属性变化监测需要使用deep:true深度监听,多少层内产生变化都可以监测到。

<template>
	<el-card><el-input></el-input></el-card>
</template>

<script>
export default {
	data() {
		return {
			name: &#39;123&#39;,
			arr1: [
				{
					id: 1,
					sex: 11
				}
			],
			arr2: [
				{
					id: 2,
					sex: 22,
					list: [
						{
							id: 3,
							sex: 33
						}
					]
				}
			]
		};
	},
	watch: {
		arr1: {
			handler(newVal, oldVal) {
				console.log(&#39;newVal1&#39;, newVal);
				console.log(&#39;oldVal1&#39;, oldVal);
			},
			deep: true
		},
		arr2: {
			handler(newVal, oldVal) {
				console.log(&#39;newVal2&#39;, newVal);
				console.log(&#39;oldVal2&#39;, oldVal);
			},
			deep: true
		}
	},
	methods: {
		inputFn(e) {
			this.arr1[0].sex = e;
			this.arr2[0].list[0].sex = e;
		}
	}
};
</script>

<style></style>

Apakah fungsi jam tangan vue?

 Apakah fungsi jam tangan vue?

Apakah fungsi jam tangan vue?

(学习视频分享:web前端开发编程基础视频

Atas ialah kandungan terperinci Apakah fungsi jam tangan vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn