溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“vue對(duì)象的偵聽屬性怎么表示”，在日常操作中，相信很多人在vue對(duì)象的偵聽屬性怎么表示問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”vue對(duì)象的偵聽屬性怎么表示”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！
vue對(duì)象的偵聽屬性用“watch”表示。所謂監(jiān)聽就是對(duì)內(nèi)置對(duì)象的狀態(tài)或者屬性變化進(jìn)行監(jiān)聽并且做出反應(yīng)的響應(yīng)，監(jiān)聽屬性，意思就是可以監(jiān)視其他數(shù)據(jù)的變化。vue中監(jiān)聽屬性有兩種寫法：1、在“new Vue()”中傳入watch配置；2、通過(guò)“vm.$watch”進(jìn)行監(jiān)聽。
watch 偵聽屬性
所謂監(jiān)聽就是對(duì)內(nèi)置對(duì)象的狀態(tài)或者屬性變化進(jìn)行監(jiān)聽并且做出反應(yīng)的響應(yīng)，監(jiān)聽屬性，意思就是可以監(jiān)視其他數(shù)據(jù)的變化。
有的時(shí)候，我們需要的派生數(shù)據(jù)是通過(guò)異步的方式處理的，這個(gè)時(shí)候，計(jì)算屬性就不太好用了（不能處理異步）。我們可以使用另外一個(gè)選項(xiàng)：watch
watch : 偵聽屬性；監(jiān)聽的是data的屬性，當(dāng)屬性發(fā)生改變以后，會(huì)做的一些事情
監(jiān)聽屬性有兩種寫法，如下：
new Vue()中傳入watch配置。
通過(guò)vm.$watch進(jìn)行監(jiān)聽。
看個(gè)具體的例子。
在new Vue()中傳入watch配置。
<body>
<div id="root">
<div>今天天氣很{{info}}</div><br/>
<button @click="changeWeather">切換天氣</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("監(jiān)聽isHot：","newValue="+newValue,"oldValue="+oldValue);
}
}
}
})
</script></body>
如果watch isHot 時(shí)，只提供了回調(diào)函數(shù)handler，如下：
watch:{
isHot:{
handler(newValue,oldValue){
console.log("isHot:newValue="+newValue,"oldValue="+oldValue);
}
}}
則可以簡(jiǎn)寫成如下形式：
watch:{
isHot(newValue,oldValue){
console.log("isHot:newValue="+newValue,"oldValue="+oldValue);
}}
通過(guò)vm.$watch進(jìn)行監(jiān)聽。
<body>
<div id="root">
<div>今天天氣很{{info}}</div><br/>
<button @click="changeWeather">切換天氣</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("監(jiān)聽isHot：","newValue="+newValue,"oldValue="+oldValue);
}
})
</script></body>
如果watch isHot時(shí)，只提供了handler，如下：
vm.$watch("isHot",{
handler(newValue,oldValue){
console.log("isHot:newValue="+newValue,"oldValue="+oldValue);
}})
則可以簡(jiǎn)寫成以下形式：
vm.$watch("isHot",function(newValue,oldValue){
console.log("isHot:newValue="+newValue,"oldValue="+oldValue);})
打開瀏覽器，測(cè)試下。
<body>
<div id="root">
<div>a的值是{{numbers.a}}</div>
<button @click="numbers.a++">點(diǎn)我加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發(fā)生了變化！");
}
}
}
})
</script></body>
監(jiān)聽多級(jí)結(jié)構(gòu)的某個(gè)屬性，如numbers.a，當(dāng)numbers對(duì)象的a屬性發(fā)生變化時(shí)，Vue將偵聽到，并執(zhí)行回調(diào)handler。
監(jiān)聽多級(jí)結(jié)構(gòu)的所有屬性（深度監(jiān)聽），如"numbers":{deep:true}，當(dāng)numbers對(duì)象的任一屬性發(fā)生變化，Vue也能偵聽到，并執(zhí)行回到handler。
監(jiān)聽屬性和計(jì)算屬性
<body>
<div id="root">
姓：<input type="text" v-model="firstName" /><br/><br/>
名：<input type="text" v-model="lastName" /><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></body>
<body>
<div id="root">
姓：<input type="text" v-model="firstName" /><br/><br/>
名：<input type="text" v-model="lastName" /><br/><br/>
全名：<span>{{fullName}}</span>
</div>
<script>
new Vue({
el:"#root",
data:{
firstName:"張",
lastName:"三"
},
computed:{
fullName(){
return this.firstName+"-"+this.lastName;
}
}
})
</script></body>
可以看到：計(jì)算屬性能夠完成的，監(jiān)聽屬性一定能夠完成。
但，監(jiān)聽屬性能夠完成的，計(jì)算屬性不一定能夠完成，比如當(dāng)數(shù)據(jù)變化時(shí)執(zhí)行異步操作。看個(gè)具體的例子：當(dāng)firstName變化時(shí)，等1秒后，fullName才變化。
<body>
<div id="root">
姓：<input type="text" v-model="firstName" /><br/><br/>
名：<input type="text" v-model="lastName" /><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></body>
【vue】方法、計(jì)算屬性、數(shù)據(jù)監(jiān)聽也對(duì)計(jì)算屬性和監(jiān)聽屬性做過(guò)對(duì)比。雖然計(jì)算屬性在大多數(shù)情況下更合適，但當(dāng)需要在數(shù)據(jù)變化時(shí)執(zhí)行異步操作時(shí)，監(jiān)聽屬性更有用。
另外，再次建議：
由Vue管理的函數(shù)，最好寫成普通函數(shù)，這樣函數(shù)中的this指向才是Vue實(shí)例。
不被Vue管理的函數(shù)，如定時(shí)器函數(shù)、ajax回調(diào)函數(shù)、promise函數(shù)，最好寫成箭頭函數(shù)。因?yàn)榧^函數(shù)沒(méi)有自己的this。
到此，關(guān)于“vue對(duì)象的偵聽屬性怎么表示”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
