監聽器

Vue.js 提供了三種方法來處理內容：方法 (methods)、監聽器 (watchers) 和計算屬性 (computed properties)。該如何選擇使用哪一種方法呢？ 使用方法 (methods) 的時機： 當需要對 DOM 中的某些事件做出反應時。 當某些事情在組件中發生時調用函數。你可以從計算屬性 (computed properties) 或監聽器 (watchers) 中調用方法。 使用計算屬性 (computed properties) 的時機： 需要根據現有的數據來生成新的數據。 你在模板中使用的變量是由一個或多個數據屬性構建的。 你希望將一個複雜的、嵌套的屬性名稱簡化為更易讀、更易使用的名稱，同時當原始屬性更改時更新它。 需要從模板中引用一個值。在這種情況下，創建一個計算屬性是最好的選擇，因為它會被緩存。 需要監聽多個數據屬性的變化。 使用監聽器 (watchers) 的時機： 當需要監聽某個數據屬性的變化並執行一些操作時。 當需監聽 prop 的值變化時。 當只需要監聽單個特定屬性時（同時不能監聽多個屬性）。 當需要監聽某個數據屬性直到達到某個特定值，然後執行相應操作時。

Vue 的監聽器允許您監聽組件的數據並在特定屬性變化時運行相應的功能。 監聽器是 Vue.js 的一個特殊功能，它允許您監視組件狀態的一個屬性，並在該屬性的值變化時運行一個函數。 以下是一個例子。我們有一個組件顯示一個名字，並允許您通過點擊一個按鈕來更改它： <template> <p>我的名字是 {{name}}</p> <button @click="changeName()">更改我的名字！</button> </template> <script> export default { data() { return { name: 'Flavio' } }, methods: { changeName: function() { this.name = 'Flavius' } } } </script> 當名字變化時，我們想要做一些操作，比如打印一個控制台日誌。 我們可以通過將 watch 對象添加一個與我們想要監視的數據屬性同名的屬性來實現： <script> export default { data() { return { name: 'Flavio' } }, methods: { changeName: function() { this.name = 'Flavius' } }, watch: { name: function() { console.log(this.name) } } } </script> 分配給 watch....