Vue 偵聽器
偵聽器是一種方法，它會偵聽同名的資料屬性。
每當資料屬性值發生變化時，偵聽器就會執行。
如果某個資料屬性值需要採取行動，請使用偵聽器。
偵聽器概念
偵聽器是我們將要學習的 Vue 例項中的第四個配置選項。我們已經看過的三個配置選項是 'data'、'methods' 和 'computed'。
與 'data'、'methods' 和 'computed' 一樣，偵聽器在 Vue 例項中也有一個保留名稱：'watch'。
語法
const app = Vue.createApp({
data() {
...
},
手錶: {
...
},
computed: {
...
},
methods: {
...
}
})
如頂部綠色區域所述，偵聽器監控同名的資料屬性。
我們從不呼叫偵聽器方法。它只在屬性值改變時自動呼叫。
新的屬性值始終作為輸入引數提供給偵聽器方法，舊值也是如此。
示例
一個 <input type="range"> 元素用於改變值 'rangeVal'。一個偵聽器用於阻止使用者選擇被認為是無效的 20 到 60 之間的值。
<input type="range" v-model="rangeVal">
<p>{{ rangeVal }}</p>
const app = Vue.createApp({
data() {
rangeVal: 70
},
watch: {
rangeVal(val){
if( val>20 && val<60) {
if(val<40){
this.rangeVal = 20;
}
else {
this.rangeVal = 60;
}
}
}
}
})
自己動手試一試 »
帶有新舊值的偵聽器
除了新的屬性值，前一個屬性值也會自動作為輸入引數提供給偵聽器方法。
示例
我們設定了一個 <div> 元素的點選事件，用方法 'updatePos' 記錄滑鼠指標的 x 座標 'xPos'。偵聽器利用偵聽器方法的新舊輸入引數計算新 x 座標和前一個 x 座標之間的畫素差。
<div v-on:click="updatePos"></div>
<p>{{ xDiff }}</p>
const app = Vue.createApp({
data() {
xPos: 0,
xDiff: 0
},
watch: {
xPos(newVal,oldVal){
this.xDiff = newVal-oldVal
}
},
methods: {
updatePos(evt) {
this.xPos = evt.offsetX
}
}
})
自己動手試一試 »
我們還可以使用新舊值，在輸入從無效變為有效的那一刻向用戶提供反饋。
示例
一個 <input> 元素的值連線到一個偵聽器。如果該值包含 '@' 符號，則被認為是有效的電子郵件地址。使用者會收到一個反饋文字，告知輸入是否有效、無效，或者是否在上次按鍵後剛剛變為有效。
<input v-type="email" v-model="inpAddress">
<p v-bind:class="myClass">{{ feedbackText }}</p>
const app = Vue.createApp({
data() {
inpAddress: '',
feedbackText: '',
myClass: 'invalid'
},
watch: {
inpAddress(newVal,oldVal) {
if( !newVal.includes('@') ) {
this.feedbackText = '電子郵件地址無效';
this.myClass = 'invalid';
}
else if( !oldVal.includes('@') && newVal.includes('@') ) {
this.feedbackText = '太棒了！你把它修正了！';
this.myClass = 'valid';
}
else {
this.feedbackText = '電子郵件地址有效 :)';
}
}
}
})
自己動手試一試 »
偵聽器 vs. 方法
偵聽器和方法都寫成函式，但它們之間存在許多差異
- 方法從 HTML 中呼叫。
- 方法通常在事件發生時呼叫。
- 方法自動接收事件物件作為輸入。
- 我們還可以選擇將其他值作為輸入傳送給方法。
- 偵聽器只在被偵聽的資料屬性值改變時自動呼叫。
- 偵聽器自動接收被偵聽屬性的新舊值。
- 我們不能選擇將任何其他值作為輸入傳送給偵聽器。
偵聽器 vs. 計算屬性
偵聽器和計算屬性都寫成函式。
當依賴項改變時，偵聽器和計算屬性都會自動呼叫，並且從不從 HTML 呼叫。
以下是計算屬性和偵聽器之間的一些區別
- 偵聽器只依賴於一個屬性，即它們被設定為偵聽的屬性。
- 計算屬性可以依賴於許多屬性。
- 計算屬性像資料屬性一樣使用，只是它們是動態的。
- 偵聽器不會從 HTML 中引用。
