站長(zhǎng)資訊網(wǎng)
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)聽。
前端（vue）入門到精通課程，老師在線輔導(dǎo)：聯(lián)系老師
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調(diào)試工具：點(diǎn)擊使用
本教程操作環(huán)境：windows7系統(tǒng)、vue3版，DELL G3電腦。
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è)試下。
深度監(jiān)聽
<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)聽屬性實(shí)現(xiàn)
<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>
使用計(jì)算屬性實(shí)現(xiàn)
<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。
【
