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>

輸出:

按鈕單擊時結果值發生變化

Vue.js 觀察者

在上面的範例中,結果值的值 僅在單擊按鈕時發生變化。我們現在將使用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>

輸出:

當輸入值改變時,結果值自動改變。

Vue.js 觀察者

watch

this

computed

the

vue

vue

button v-on click

the watch option

console log

computed

computed

computed

newa

array

fullname