Vue 方法 vs 監聽器 vs 計算屬性

Vue.js 提供了三種方法來處理內容：方法 (methods)、監聽器 (watchers) 和計算屬性 (computed properties)。該如何選擇使用哪一種方法呢？

使用方法 (methods) 的時機：

• 當需要對 DOM 中的某些事件做出反應時。
• 當某些事情在組件中發生時調用函數。你可以從計算屬性 (computed properties) 或監聽器 (watchers) 中調用方法。

使用計算屬性 (computed properties) 的時機：

• 需要根據現有的數據來生成新的數據。
• 你在模板中使用的變量是由一個或多個數據屬性構建的。
• 你希望將一個複雜的、嵌套的屬性名稱簡化為更易讀、更易使用的名稱，同時當原始屬性更改時更新它。
• 需要從模板中引用一個值。在這種情況下，創建一個計算屬性是最好的選擇，因為它會被緩存。
• 需要監聽多個數據屬性的變化。

使用監聽器 (watchers) 的時機：

• 當需要監聽某個數據屬性的變化並執行一些操作時。
• 當需監聽 prop 的值變化時。
• 當只需要監聽單個特定屬性時（同時不能監聽多個屬性）。
• 當需要監聽某個數據屬性直到達到某個特定值，然後執行相應操作時。

tags: [“Vue.js”, “方法”, “監聽器”, “計算屬性”]