Home >> Blog >> 簡單理解 Vue.js watch 監聽器 vue watch 觀察者的運作方式
簡單理解 Vue.js watch 監聽器 vue watch 觀察者的運作方式
Vue.js 中的Watcher是一項特殊功能，它允許人們觀察模組並在模組的值發生變化時執行指定的操作。這是一種更通用的方式來觀察和響應 Vue 實例中的數據變化。觀察者在用於執行異步操作時最有用。
注意：觀察者一次只能更改一個屬性。如果必須更改多個模組值，則可以使用計算屬性。
句法：
watch: {
// We can add our functions here
}
可以使用以下範例演示Vue.js 觀察程式：
範例：我們將首先創建一個不使用任何 Watcher 的簡單 Vue.js 應用程式。該程式的功能是在單擊按鈕時更改模組的值（將輸入值乘以 2）。
HTML
< !DOCTYPE html>
< html>
< head>
< title>Vue.js Watchers< /title>
< script src=
"https://unpkg.com/vue">
< /script>
< /head>
< body>
< h1 style="text-align: center;
color: rgb(27, 114, 53);">
GeeksforGeeks
< /h1>
< h3 style="text-align: center">
Vue.js | Watchers
< /h3>
< !-- Creating element for Vue -->
< div style="text-align: center;" id="ex">
< h3>Enter any Value :
< input type="text" v-model="value1">
< /h3>
< h3>Input number x 2 :
< span style="font-size: 30px;">
{{ result}}
< /span>
< /h3>
< !-- Creating a Button -->
< button @click="multiply">
Click Me
< /button>
< /div>
< script>
// Creating instance
new Vue({
el: '#ex',
data: {
// Setting values for fields
value1: '',
result: 0
},
methods: {
// Creating function
// for button click
multiply: function () {
this.result = this.value1 * 2;
}
}
});
< /script>
< /html>
輸出：
按鈕單擊時結果值發生變化
在上面的範例中，結果值的值 僅在單擊按鈕時發生變化。我們現在將使用watch來注意輸入模組的變化並自動更新結果值。我們將定義watch並在其中編寫所需的函數，如下所示：
Javascript
watch: {
// Creating function
// for input component
value1: function(val) {
this.value1 = val;
this.result = 2 * val;
},
// Creating function
// for result component
result: function(val) {
this.result = val;
}
}
Watcher 現在查找輸入值的變化。每當輸入值改變時，裡面的函數就會自動執行（將輸入值乘以 2），結果的值會自動改變。我們不必專門分配任何事件並等待值更改。我們將在前面的程式碼中添加上述更改，並刪除按鈕及其功能。
使用觀察者的範例：
HTML
< html>
< head>
< title>Vue.js Watchers< /title>
< script src=
"https://unpkg.com/vue">
< /script>
< /head>
< body>
< h1 style="text-align: center;
color: rgb(27, 114, 53);">
GeeksforGeeks
< /h1>
< h3 style="text-align: center">
Vue.js | Watchers
< /h3>
< !-- Creating element for Vue -->
< div style="text-align: center;" id="ex">
< h3>Enter any Value :
< input type="text" v-model="value1">
< /h3>
< h3>Input number x 2 :
< span style="font-size: 30px;">
{{result}}
< /span>
< /h3>
< /div>
< script>
// Creating instance
new Vue({
el: '#ex',
data: {
// Setting values for fields
value1: '',
result: 0
},
// Creating a Watcher
watch: {
// Creating function for
// input component
value1: function (val) {
this.value1 = val;
this.result = 2 * val;
},
// Creating function for
// result component
result: function (val) {
this.result = val;
}
}
});
< /script>
< /body>
< /html>
輸出：
當輸入值改變時，結果值自動改變。
