Vue 'watch' 選項
示例
在 watch 選項中使用監視器，以使帶有 <input type="range"> 的值無法選擇 20 到 70 之間的值。
export default {
data() {
return {
rangeVal: 4
};
},
watch: {
rangeVal(val) {
if( val>20 && val<70) {
if(val<40){
this.rangeVal = 20;
}
else {
this.rangeVal = 70;
}
}
}
}
};
定義和用法
watch 選項是一個物件，包含在 Vue 例項上宣告的所有監視器。
監視器是一個與資料屬性或計算屬性同名的函式。當具有相同名稱的屬性發生更改時，將自動呼叫該監視器。
當呼叫監視器時，新值和舊值都可以作為引數傳遞給監視器函式。
監視器也可以是一個點分隔的路徑，例如 tiger.weight，這樣只有當 tiger 物件中的 weight 屬性更改時，才會呼叫監視器。
注意：宣告監視器時應避免使用箭頭函式，因為透過 this 關鍵字無法從 such function 內部訪問 Vue 例項。
當使用物件語法編寫監視器時（參見下面的示例），可以使用以下選項：
| 選項 | 描述 |
|---|---|
| handler | 這裡編寫 watch 函式。 |
| 'method name' | 可以透過提供方法名作為字串來設定一個監視器，以便呼叫一個方法。 |
| deep | 預設值為 'false'。如果監視器是深度監視的，它還會響應監視器設定的屬性中更深層級的更改。 |
| immediate | 預設值為 'false'。在監視器建立後立即觸發。當 'immediate' 設定為 'true' 時，第一次觸發監視器時，舊值將是 'undefined'。 |
| flush | 預設值為 'pre'。指定在元件渲染時相對於何時執行回撥函式。可能的值為 'pre'、'post' 和 'sync'。請謹慎使用此 flush 選項。 |
| onTrigger/onTrack | 用於除錯。僅在開發模式下有效。 |
注意：也可以使用 $watch() 方法建立監視器。
更多示例
示例
使用物件語法的監視器。
<template>
<h2>Example watch Option</h2>
<p>The 'rangeVal' watcher is written with the object syntax, with immediate: true, so that rangeVal is moved to '70' when the page first loads:</p>
<input type="range" v-model="rangeVal">
<p>rangeVal: <span>{{ rangeVal }}</span></p>
</template>
<script>
export default {
data() {
return {
rangeVal: 40
};
},
watch: {
rangeVal: {
handler(val) {
if (val > 20 && val < 70) {
if (val < 40) {
this.rangeVal = 20;
}
else {
this.rangeVal = 70;
}
}
},
immediate: true
}
}
};
</script>
<style>
span {
padding: 3px;
font-weight: bold;
font-family: 'Courier New', Courier, monospace;
background-color: lightgreen;
}
</style>
相關頁面
Vue 教程：Vue Watchers
Vue 教程：Vue v-model 指令
Vue 參考：Vue $watch() 方法
