Vue $watch() 方法
示例
使用 $watch() 方法建立一個監聽器，每當 'value' 資料屬性改變時，它都會寫入一條新訊息。
mounted() {
this.$watch('value', function() {
this.results.push('$watch() method')
})
}
更多示例請參見下方。
定義和用法
$watch() 方法用於建立監聽器。
$watch() 方法返回一個停止函式，我們可以用它來停止監聽器。（參見示例 4）
監聽器用於監視值的變化（第一個引數），並在發生變化時執行操作（第二個引數）。也可以為監聽器定義其他屬性（第三個引數）。
| 引數 | 描述 |
|---|---|
| 監聽源 | 必需。第一個引數是監聽源。這可以是一個元件屬性名稱字串（上面的示例），一個簡單的點分隔路徑字串（示例 5），或一個函式（示例 6）。 |
| 回撥函式 | 必需。第二個引數是一個回撥函式，當監聽源發生變化時執行。回撥函式可以設定為接收監聽源的新舊值作為引數（參見示例 1）。 |
| 選項物件 | 可選。在這裡我們可以指定 deep、immediate、flush 和 onTrigger/onTrack 選項。 deep: 預設值為 'false'。如果監聽器是深度監聽的，它還會對監聽器所設定的屬性內部更深層次的更改做出反應。（參見示例 2） immediate: 預設值為 'false'。在建立後立即觸發監聽器。當 'immediate' 設定為 'true' 時，監聽器首次觸發時，舊值將為 'undefined'。（參見示例 3） flush: 預設值為 'pre'。指定回撥函式相對於元件渲染何時執行。可能的值為 'pre'、'post' 和 'sync'。請謹慎使用此 flush 選項。 onTrigger/onTrack: 用於除錯。僅在開發模式下有效。 |
注意: 監聽器也可以使用 watch 選項建立。
更多示例
示例 1
使用 $watch() 方法，每當 'value' 資料屬性改變時，都會寫入一條包含新舊值的新訊息。
<template>
<h2>Example $watch() Method</h2>
<p>Drag the slider to change the value so that the $watch() method is triggered. The callback function writes a message with the new and old values.</p>
<div>
<p><input type="range" min="0" max="10" v-model="value"> Current value: {{ value }}</p>
<ol>
<li v-for="x in results">{{ x }}</li>
</ol>
</div>
</template>
<script>
export default {
data() {
return {
value: 4,
results: []
};
},
mounted() {
this.$watch('value', function(newVal, oldVal) {
this.results.push('Old value:'+oldVal+', new value: '+newVal)
})
}
};
</script>
<style scoped>
div {
border: solid black 1px;
padding: 10px;
}
</style>
示例 2
使用 $watch() 方法並將 deep 監聽選項設定為 'true'。現在，監聽器可以檢測到 'value' 物件內部更深層次的更改。
<template>
<h2>Example $watch() Method</h2>
<p>Register an extra hobby for Stuart. The hobbies are stored in an array inside the 'value' object. The $watch() method
is triggered because the 'deep' option is set to 'true' so that the watcher also detects changes further inside the
object.</p>
<div>
<p>Register an extra hobby for Stuart:</p>
<p><input type="text" ref="inpText"></p>
<button v-on:click="regHobby">Register</button>
<ol>
<li v-for="x in watchMessages">{{ x }}</li>
</ol>
</div>
<p>Current 'value' object:</p>
<pre>{{ this.value }}</pre>
</template>
<script>
export default {
data() {
return {
value: {
owner: 'Stuart',
address: 'Faraway Lane',
hobbies: ['Bird watching', 'Trail running']
},
watchMessages: []
};
},
methods: {
regHobby() {
this.value.hobbies.push(this.$refs.inpText.value);
this.$refs.inpText.value = null;
this.$refs.inpText.focus();
}
},
mounted() {
this.$watch('value', function () {
this.watchMessages.push('watcher triggered')
}, {
deep: true
});
}
};
</script>
<style scoped>
div {
border: solid black 1px;
padding: 10px;
}
li {
background-color: lightgreen;
}</style>
示例 3
使用 $watch() 方法並將 immediate 監聽選項設定為 'true'。現在，監聽器在建立後也會立即觸發。
<template>
<h2>Example $watch() Method</h2>
<p>With the 'immediate' option set to 'true' the watcher is also triggered right after it is created.</p>
<div>
<input type="range" min="0" max="10" v-model="value"> Current value: {{ value }}
<p>Messages from the watcher:</p>
<ol>
<li v-for="x in watchMessages">{{ x }}</li>
</ol>
</div>
</template>
<script>
export default {
data() {
return {
value: 4,
watchMessages: []
};
},
mounted() {
this.$watch('value', (newVal, oldVal) => {
this.watchMessages.push('Old value: '+oldVal+' New value: '+newVal)
}, {
immediate: true
});
}
};
</script>
<style scoped>
div {
border: solid black 1px;
padding: 10px;
}
li:first-child {
background-color: lightgreen;
}</style>
示例 4
使用 $watch() 方法返回的停止函式來停止監聽器。
<template>
<h2>Example $watch() Method</h2>
<p>Drag the slider to see the watcher work, click the stop button, and drag the slider again to confirm that the watcher has now stopped.</p>
<div>
<p><input type="range" min="0" max="10" v-model="value"> Current value: {{ value }}</p>
<button v-on:click="stopFunc">Stop Watcher</button>
<ol>
<li v-for="x in results">{{ x }}</li>
</ol>
</div>
</template>
<script>
export default {
data() {
return {
value: 4,
results: [],
stopFunc: null
};
},
mounted() {
this.stopFunc = this.$watch('value', function() {
this.results.push('$watch() method')
})
}
};
</script>
<style scoped>
div {
border: solid black 1px;
padding: 10px;
}
</style>
示例 5
使用點分隔路徑字串，以便 $watch() 方法可以監聽 'value' 物件中的 'country' 屬性。
<template>
<h2>Example $watch() Method</h2>
<p>The watcher is set up to watch 'value.country' and will therefore detect when the country is changed inside the 'value' object.</p>
<div>
<p>Register a new country for Stuart to live in:</p>
<p><input type="text" v-model="inpVal"></p>
<button v-on:click="regHobby">Register</button>
<ol>
<li v-for="x in watchMessages">{{ x }}</li>
</ol>
</div>
<p>Current 'value' object:</p>
<pre>{{ this.value }}</pre>
</template>
<script>
export default {
data() {
return {
inpVal: null,
value: {
owner: 'Stuart',
address: 'Faraway Lane',
country: 'Mexico'
},
watchMessages: []
};
},
methods: {
regHobby() {
this.value.country = this.inpVal;
this.inpVal = null;
}
},
mounted() {
this.$watch('value.country', function () {
this.watchMessages.push('watcher triggered')
});
}
};
</script>
<style scoped>
div {
border: solid black 1px;
padding: 10px;
}
</style>
示例 6
在 $watch() 方法中使用函式來監聽多個值的變化。
<template>
<h2>Example $watch() Method</h2>
<p>Using a function as the first argument in the watcher to watch for changes in the sum of value A and value B.</p>
<div>
<p>Register a new country for Stuart to live in:</p>
<p>Value A: <input type="range" min="-10" max="20" v-model="inpValA"> {{ inpValA }}</p>
<p>Value B: <input type="range" min="-10" max="20" v-model="inpValB"> {{ inpValB }}</p>
<ol>
<li v-for="x in watchMessages">{{ x }}</li>
</ol>
</div>
</template>
<script>
export default {
data() {
return {
inpValA: 2,
inpValB: 4,
watchMessages: []
};
},
mounted() {
this.$watch(
()=> Number(this.inpValA) + Number(this.inpValB),
function (newVal,oldVal) {
this.watchMessages.push('watcher triggered. A + B = ' + newVal)
}
);
}
};
</script>
<style scoped>
div {
border: solid black 1px;
padding: 10px;
}
li {
background-color: lightgreen;
}
</style>
相關頁面
Vue 教程：Vue 監聽器
Vue 教程： Vue 方法
Vue 教程： Vue v-on 指令
Vue 教程：Vue Template Refs
Vue 參考：Vue $refs 物件
JavaScript 教程：JS 箭頭函式
