Vue의 시계는 어떤 역할을 하나요?
- 青灯夜游원래의
- 2022-11-30 20:29:513574검색
Vue에서 watch는 데이터의 데이터가 수정되었는지 여부를 모니터링하는 데 사용됩니다. 수정되면 다른 작업을 수행할 수 있습니다. Watch는 데이터 변경에 응답하고 특정 데이터 변경을 통해 일부 작업을 수행할 수 있도록 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: '123'
};
}
};
</script>
<style></style>
watch 사용 방법
첫 번째 방법: 일반 사용법
(1) 모니터링할 이름 값을 모니터 이름으로 처리합니다. [첫 번째 작성 방법]
<template>
<el-card><el-input></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) 모니터링할 name 값을 객체로 취급하고 hanler 메소드를 사용하여 모니터링합니다. [두 번째 작성 방법]
<template>
<el-card><el-input></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>
위의 두 가지 작성 방법은 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: '123'
};
},
watch: {
name: {
handler(newVal, oldVal) {
console.log('newVal', newVal);
console.log('oldVal', oldVal);
},
immediate: true
}
}
};
</script>
<style></style>
즉시 실행:
값이 변경될 때:
세 번째 방법: 고급 사용법(심층 모니터링)
(1) 일반 변수의 변경 사항을 모니터링하려면 다음을 사용할 수 있습니다. 위의 두 가지 방법이 있지만 모니터링 변수의 값이 객체인 경우에는 작동하지 않습니다.
예를 들어 양식 개체의 내부 속성 변경 사항을 모니터링하면 모니터링할 수 없습니다.
<template>
<el-card><el-input></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>
그런 다음 결과로 판단하면 출력 인쇄가 표시되지 않았으므로 일반적인 watch 방법으로는 개체의 내부 속성 변화를 모니터링할 수 없습니다.
그렇다면 물체의 내부 속성 변화를 모니터링하려면 어떻게 해야 할까요?
watch 메소드는 객체 내부 속성의 변화를 모니터링할 수 있는 깊은 속성(딥 리스닝)을 제공합니다.
<template>
<el-card><el-input></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>
양식의 변경 사항을 모니터링하려면 true로 설정하세요. 양식에 더 많은 속성이 있으면 이 리스너가 양식의 모든 속성에 추가되고 속성 값의 모든 변경 사항이 실행됩니다.
deep 속성 값이 true이면 객체 속성 내 변경 사항을 모니터링할 수 있습니다.
deep 속성 값이 false이면 모니터링할 수 없습니다.
(2) 객체의 특정 속성 값만 모니터링해야 하는 경우 다음을 사용할 수 있습니다. 문자열 형식으로 객체 속성을 모니터링합니다.,
이 모니터링 프로세스는 심층 모니터링을 사용하지 않고도 모니터링할 수 있습니다. 깊이 있는 개체 속성의 변경입니다.
<template>
<el-card><el-input></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>
네 번째 유형: 확장(배열 모니터링)
(1) 배열의 (1차원, 다차원) 변경 사항에는 심층 모니터링이 필요하지 않습니다.
<template>
<el-card><el-input></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><el-input></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>
위 내용은 Vue의 시계는 어떤 역할을 하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!