偵聽器一般來說是用來監聽資料的變化，默認是在資料發生變化時執行，
監聽的資料名放到這里面作為函式名，這個函式里面有兩個引數，一個是新值，一個是舊值，
在vue中，使用watch來回應資料的變化，關于watch的用法大致有三種，
1、下面代碼是watch的一種簡單的用法
<div id="app">
<input type="text" v-model="firstName" />
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
firstName:"張"
},
watch:{
firstName：(newVal,oldVal){
//firstName即為你想監聽的資料的名稱，要監聽誰函式名就用誰的 如監聽v-model的firstName
//newVal：表示改變后的值，即第一個形參，不要調換位置
//oldVal：表示改變前的值，
console.log({newVal,oldVal}); // {newVal: "陳", oldVal: "張"}
}
//直接寫一個監聽處理函式，當每次監聽到cityName值發生改變時，執行函式，
//也可以在所監聽的資料后面直接加字串形式的方法名：firstName: 'nameChange'
},
methods:{
nameChange(){
}
}
})
vm.firstName = "陳"；//改變監聽的值
</script>2、immediate 立即監聽
使用watch基本用法時有一個特點，就是當值第一次系結的時候，不會執行監聽函式，只有值發生改變才會執行，如果我們需要在最初系結值的時候也執行函式，則就需要用到immediate屬性，
watch: {
firstName: {
handler(newName, oldName) {
this.fullName = newName + ' ' + this.lastName;
},
{ immediate: true }
}
}監聽的資料后面寫成物件形式，包含handler方法和immediate，上面簡單的寫法我們寫的函式其實就是在寫這個handler方法、默認省略而已，
3、handler方法
<div id="app">
<div>
<p>Number: {{ myNumber }}</p>
<p>Number: <input type="text" v-model.number="myNumber"></p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
myNumber: 'Dawei'
},
watch: {
myNumber: {
handler(newVal, oldVal) {
console.log('newVal', newVal);
console.log('oldVal', oldVal);
},
//immediate為true時則立即觸發回呼函式；如果為false，則和上面的例子一樣，不會立即執行回呼，
immediate: true
}
}
})
</script>
//handler方法就是你watch中需要具體執行的方法4、 deep屬性
對于物件或者物件中的屬性，我們如何監聽？那么就介紹deep屬性，它的作用就是解決這個問題的關鍵，
<div id="root">
<p>obj.a: {{obj.a}}</p>
<p>obj.a: <input type="text" v-model="obj.a"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#root',
data: {
obj: {
a: 123
}
},
watch: {
obj: {
handler(newName, oldName) {
console.log(newName, oldName);
},
immediate: true,
deep:true
}
}
})
</script>上面的代碼如果不加deep:true 那么console中就不會執行，只執行第一次，輸出結果為undefined
默認情況下 handler 只監聽obj這個屬性它的參考的變化，我們只有給obj賦值的時候它才會監聽到，
這個時候就可以使用deep深入觀察，監聽器會一層層的往下遍歷，給物件的所有屬性都加上這個監聽器，但是這樣消耗過大，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/328019.html
標籤：其他
上一篇：如何實作一個深淺拷貝
下一篇：gitbook安裝教程