>  기사  >  웹 프론트엔드  >  Vue의 시계는 어떤 역할을 하나요?

Vue의 시계는 어떤 역할을 하나요?

青灯夜游
青灯夜游원래의
2022-11-30 20:29:513579검색

Vue에서 watch는 데이터의 데이터가 수정되었는지 여부를 모니터링하는 데 사용됩니다. 수정되면 다른 작업을 수행할 수 있습니다. Watch는 데이터 변경에 응답하고 특정 데이터 변경을 통해 일부 작업을 수행할 수 있도록 Vue에서 내부적으로 제공하는 일반적인 방법입니다.

Vue의 시계는 어떤 역할을 하나요?

이 튜토리얼의 운영 환경: windows7 시스템, vue3 버전, DELL G3 컴퓨터.

시계는 어떤 용도로 사용되나요?

Vue는 감시 옵션을 통해 데이터 변경에 대응하는 보다 일반적인 방법을 제공합니다. 이 접근 방식은 데이터가 변경될 때 비동기식 또는 비용이 많이 드는 작업을 수행해야 할 때 가장 유용합니다.

시계란 무엇인가요?

객체, 키는 관찰할 표현식이고 값은 해당 콜백 함수입니다. 값은 메서드 이름일 수도 있고 옵션이 포함된 개체일 수도 있습니다. Vue 인스턴스는 인스턴스화될 때 $watch()를 호출하여 watch 객체의 각 속성을 탐색합니다. 문서 전송

예:

<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>

watch 사용 방법

첫 번째 방법: 일반 사용법

(1) 모니터링할 이름 값을 모니터 이름으로 처리합니다. [첫 번째 작성 방법]

<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>

Vue의 시계는 어떤 역할을 하나요?

(2) 모니터링할 name 값을 객체로 취급하고 hanler 메소드를 사용하여 모니터링합니다. [두 번째 작성 방법]

<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>

위의 두 가지 작성 방법은 watch 리스너가 흔히 사용하는 사용법입니다. 이 사용법은 처음 값을 바인딩할 때, 바인딩을 했을 때만 듣기 기능이 실행되지 않는 특징이 있습니다. 값이 발생하면 변경된 경우에만 실행됩니다. 값이 처음 바인딩될 때 수신 함수를 실행해야 하는 경우 Immediate 속성을 사용해야 합니다.

이제 좀 더 고급 사용법에 대해 이야기해 보겠습니다.

두 번째: 고급 사용법

예를 들어 상위 구성 요소가 하위 구성 요소에 동적으로 값을 전송하는 경우 하위 구성 요소 props도 전달된 기본값을 처음 얻을 때 함수를 실행해야 합니다. 이때, Immediate 속성을 true로 설정하고 핸들러 메소드와 조합하여 사용해야 합니다.

immediate 속성을 true로 설정하면 값 변경 여부에 관계없이 항상 모니터링됩니다.

immediate 속성을 false로 설정하면 일반적인 사용에서는 값이 변경될 때만 모니터링됩니다.

<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>

즉시 실행:

Vue의 시계는 어떤 역할을 하나요?

값이 변경될 때:

Vue의 시계는 어떤 역할을 하나요?

세 번째 방법: 고급 사용법(심층 모니터링)

(1) 일반 변수의 변경 사항을 모니터링하려면 다음을 사용할 수 있습니다. 위의 두 가지 방법이 있지만 모니터링 변수의 값이 객체인 경우에는 작동하지 않습니다.

예를 들어 양식 개체의 내부 속성 변경 사항을 모니터링하면 모니터링할 수 없습니다.

<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>

Vue의 시계는 어떤 역할을 하나요?

그런 다음 결과로 판단하면 출력 인쇄가 표시되지 않았으므로 일반적인 watch 방법으로는 개체의 내부 속성 변화를 모니터링할 수 없습니다.

그렇다면 물체의 내부 속성 변화를 모니터링하려면 어떻게 해야 할까요?

watch 메소드는 객체 내부 속성의 변화를 모니터링할 수 있는 깊은 속성(딥 리스닝)을 제공합니다.

<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>

Vue의 시계는 어떤 역할을 하나요?

양식의 변경 사항을 모니터링하려면 true로 설정하세요. 양식에 더 많은 속성이 있으면 이 리스너가 양식의 모든 속성에 추가되고 속성 값의 모든 변경 사항이 실행됩니다.

deep 속성 값이 true이면 객체 속성 내 변경 사항을 모니터링할 수 있습니다.

deep 속성 값이 false이면 모니터링할 수 없습니다.

(2) 객체의 특정 속성 값만 모니터링해야 하는 경우 다음을 사용할 수 있습니다. 문자열 형식으로 객체 속성을 모니터링합니다.,

이 모니터링 프로세스는 심층 모니터링을 사용하지 않고도 모니터링할 수 있습니다. 깊이 있는 개체 속성의 변경입니다.

<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>

Vue의 시계는 어떤 역할을 하나요?

네 번째 유형: 확장(배열 모니터링)

(1) 배열의 (1차원, 다차원) 변경 사항에는 심층 모니터링이 필요하지 않습니다.

<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>

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>

Vue의 시계는 어떤 역할을 하나요?

 Vue의 시계는 어떤 역할을 하나요?

Vue의 시계는 어떤 역할을 하나요?

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

위 내용은 Vue의 시계는 어떤 역할을 하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.