Vue.js 的監聽器
Vue 的監聽器允許您監聽組件的數據並在特定屬性變化時運行相應的功能。
監聽器是 Vue.js 的一個特殊功能，它允許您監視組件狀態的一個屬性，並在該屬性的值變化時運行一個函數。
以下是一個例子。我們有一個組件顯示一個名字，並允許您通過點擊一個按鈕來更改它：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <template>
<p>我的名字是 {{name}}</p>
<button @click="changeName()">更改我的名字！</button>
</template>
<script>
export default {
data() {
return {
name: 'Flavio'
}
},
methods: {
changeName: function() {
this.name = 'Flavius'
}
}
}
</script>
|
當名字變化時，我們想要做一些操作，比如打印一個控制台日誌。
我們可以通過將 watch 對象添加一個與我們想要監視的數據屬性同名的屬性來實現：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <script>
export default {
data() {
return {
name: 'Flavio'
}
},
methods: {
changeName: function() {
this.name = 'Flavius'
}
},
watch: {
name: function() {
console.log(this.name)
}
}
}
</script>
|
分配給 watch.name 的函數可以可選地接受 2 個參數。第一個是新的屬性值，第二個是舊的屬性值：
1
2
3
4
5
6
7
8
9
10
| <script>
export default {
/* ... */
watch: {
name: function(newValue, oldValue) {
console.log(newValue, oldValue)
}
}
}
</script>
|
與計算屬性不同，監聽器不能像模板一樣從模板中查找。
tags: [“Vue.js”, “監聽器”, “屬性變化”, “組件”, “監聽數據”]