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
进行监听。
看个具体的例子。
<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); }}
<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>
심층 모니터링
numbers.a
와 같은 다중 레벨 구조의 속성을 모니터링합니다. >, 숫자 객체의 속성이 변경되면 Vue는 콜백 핸들러를 수신하고 실행합니다. "numbers":{deep:true}
와 같은 다중 레벨 구조의 모든 속성(심층 모니터링)을 모니터링합니다. 숫자 객체의 속성이 변경되면 Vue는 이를 수신하고 실행할 수도 있습니다. 처리기로 돌아갑니다.
위 내용은 vue 객체의 listening 속성은 무엇을 나타냅니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!