vue 객체의 listening 속성은 무엇을 나타냅니까?
- 青灯夜游원래의
- 2022-12-14 19:46:592441검색
vue 객체의 listening 속성은 "watch"로 표현됩니다. 소위 모니터링은 내장 개체의 상태나 속성의 변경 사항을 모니터링하고 이에 응답하는 것입니다. 속성 모니터링은 다른 데이터의 변경 사항을 모니터링할 수 있음을 의미합니다. Vue에 모니터링 속성을 작성하는 방법에는 두 가지가 있습니다. 1. "new Vue()"에 watch 구성을 전달합니다. 2. "vm.$watch"를 통해 모니터링합니다.
이 튜토리얼의 운영 환경: windows7 시스템, vue3 버전, DELL G3 컴퓨터.
watch Listening 속성
소위 모니터링은 내장 개체의 상태나 속성 변경을 모니터링하고 그에 따라 응답하는 것을 의미합니다. 다른 데이터의 변경 사항을 모니터링할 수 있습니다.
때때로 필요한 파생 데이터가 비동기식으로 처리되는 경우가 있습니다. 이때 계산된 속성은 사용하기 쉽지 않습니다(비동기식으로 처리할 수 없음). 다른 옵션을 사용할 수 있습니다: watch
watch: 모니터링되는 것은 데이터의 속성입니다. 속성이 변경되면 다음과 같이 청취 속성을 작성하는 두 가지 방법이 있습니다.
new Vue()의watch 구성을 전달합니다.
-
vm.$watch를 통해 모니터링하세요.new Vue()中传入watch配置。 通过
vm.$watch进行监听。
看个具体的例子。
- 在new Vue()中传入watch配置。
<div>
<div>今天天气很{{info}}</div>
<br>
<button>切换天气</button>
</div>
<script>
Vue.config.productionTip = false;
new Vue({
el:"#root",
data:{
isHot:true
},
computed:{
info(){
return this.isHot ? "炎热" : "凉爽";
}
},
methods:{
changeWeather(){
this.isHot = !this.isHot;
}
},
watch:{
isHot:{
immediate:true,
handler(newValue,oldValue){
console.log("监听isHot：","newValue="+newValue,"oldValue="+oldValue);
}
}
}
})
</script>
如果watch isHot 时，只提供了回调函数handler，如下：
watch:{
isHot:{
handler(newValue,oldValue){
console.log("isHot:newValue="+newValue,"oldValue="+oldValue);
}
}}
则可以简写成如下形式：
watch:{
isHot(newValue,oldValue){
console.log("isHot:newValue="+newValue,"oldValue="+oldValue);
}}
- 通过vm.$watch进行监听。
<div>
<div>今天天气很{{info}}</div>
<br>
<button>切换天气</button>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:"#root",
data:{
isHot:true
},
computed:{
info(){
return this.isHot ? "炎热" : "凉爽";
}
},
methods:{
changeWeather(){
this.isHot = !this.isHot;
}
}
})
vm.$watch("isHot",{
immediate:true,
handler(newValue,oldValue){
console.log("监听isHot：","newValue="+newValue,"oldValue="+oldValue);
}
})
</script>
如果watch isHot时，只提供了handler，如下：
vm.$watch("isHot",{
handler(newValue,oldValue){
console.log("isHot:newValue="+newValue,"oldValue="+oldValue);
}})
则可以简写成以下形式：
vm.$watch("isHot",function(newValue,oldValue){
console.log("isHot:newValue="+newValue,"oldValue="+oldValue);})
打开浏览器，测试下。
深度监听
<div>
<div>a的值是{{numbers.a}}</div>
<button>点我加1</button>
</div>
<script>
Vue.config.productionTip = false;
new Vue({
el:"#root",
data:{
numbers:{
a:1,
b:1
}
},
watch:{
"numbers.a":{
handler(newValue,oldValue){
console.log("a:","newValue="+newValue,"oldValue="+oldValue);
}
},
"numbers":{
deep:true,
handler(newValue,oldValue){
console.log("numbers发生了变化！");
}
}
}
})
</script>
监听多级结构的某个属性，如numbers.a，当numbers对象的a属性发生变化时，Vue将侦听到，并执行回调handler。
监听多级结构的所有属性（深度监听），如"numbers":{deep:true}
구체적인 예를 살펴보세요. 새로운 Vue()에서 watch 구성을 전달하세요.
<div>
姓：<input><br><br>
名：<input><br><br>
全名：<span>{{fullName}}</span>
</div>
<script>
new Vue({
el:"#root",
data:{
firstName:"张",
lastName:"三",
fullName:"张-三"
},
watch:{
firstName(val){
this.fullName = val + this.lastName;
},
lastName(val){
this.fullName = this.firstName + "-" + val;
}
}
})
</script>watch isHot인 경우 다음과 같이 콜백 함수 핸들러만 제공됩니다.
<div>
姓：<input><br><br>
名：<input><br><br>
全名：<span>{{fullName}}</span>
</div>
<script>
new Vue({
el:"#root",
data:{
firstName:"张",
lastName:"三"
},
computed:{
fullName(){
return this.firstName+"-"+this.lastName;
}
}
})
</script>다음과 같은 형식으로 축약할 수 있습니다.
<div>
姓：<input><br><br>
名：<input><br><br>
全名：<span>{{fullName}}</span>
</div>
<script>
new Vue({
el:"#root",
data:{
firstName:"张",
lastName:"三",
fullName:"张-三"
},
watch:{
firstName(val){
setTimeout(() => {
this.fullName = val + "-" + this.lastName;
},1000);
},
lastName(val){
this.fullName = this.firstName + "-" + val;
}
}
})
</script>
vm.$watch를 통해 모니터링합니다. rrreeewatch isHot인 경우 다음과 같이 핸들러만 제공됩니다.
rrreee다음 형식으로 축약할 수 있습니다. rrreee브라우저를 열고 테스트해 보세요.
심층 모니터링
numbers.a와 같은 다중 레벨 구조의 속성을 모니터링합니다. >, 숫자 객체의 속성이 변경되면 Vue는 콜백 핸들러를 수신하고 실행합니다. "numbers":{deep:true}와 같은 다중 레벨 구조의 모든 속성(심층 모니터링)을 모니터링합니다. 숫자 객체의 속성이 변경되면 Vue는 이를 수신하고 실행할 수도 있습니다. 처리기로 돌아갑니다.
- 청취 속성 및 계산 속성
- 청취 속성을 사용하여 구현
위 내용은 vue 객체의 listening 속성은 무엇을 나타냅니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!