在 Vue 2 和 Vue 3 中，computed（計算屬性）和 methods（方法）都是處理數據邏輯的方式，但它們在緩存機制、使用場景、執行時機等方面有顯著區別，且這些區別在兩個版本中保持一致。
1. 緩存機制（核心區別）
-
computed 計算屬性：
會對計算結果進行緩存。只有當依賴的響應式數據發生變化時，才會重新計算；如果依賴數據不變，多次訪問計算屬性會直接返回緩存的結果，不會重復執行計算邏輯。示例（Vue 2/3 通用）：
// 計算屬性會緩存結果 computed: {filteredList() {console.log('computed 執行了');return this.list.filter(item => item.active);} }多次訪問
filteredList時，若list未變化，只會打印一次computed 執行了。 -
methods 方法：
沒有緩存機制，每次調用都會重新執行函數，無論依賴的數據是否變化。示例（Vue 2/3 通用）：
// 方法每次調用都會重新執行 methods: {getFilteredList() {console.log('method 執行了');return this.list.filter(item => item.active);} }每次調用
getFilteredList()或在模板中使用{{ getFilteredList() }}時，都會打印method 執行了。
2. 使用場景
-
computed：
適合用于基于現有響應式數據派生新數據的場景，尤其是需要頻繁訪問結果時（如模板中多次引用）。
例如：數據過濾、格式化（如日期轉換）、數值計算（如總價 = 單價 × 數量）等。 -
methods：
適合用于處理業務邏輯、事件處理或不需要緩存的場景。
例如：按鈕點擊事件、表單提交、一次性數據處理（如獲取隨機數）等。
3. 調用方式
-
computed：
在模板中使用時不需要加括號，直接作為屬性訪問（因為它本質是一個被緩存的屬性）。
示例：{{ filteredList }}（而非{{ filteredList() }}）。 -
methods：
在模板中使用時必須加括號（作為函數調用）。
示例：{{ getFilteredList() }}或@click="handleClick()"。
4. 依賴追蹤
-
computed：
會自動追蹤依賴的響應式數據（如data、props中的數據），當依賴變化時自動更新。 -
methods：
不會主動追蹤依賴，僅在被調用時執行，其內部使用的響應式數據變化不會觸發方法自動執行（除非手動調用）。
總結對比表
| 特性 | computed 計算屬性 | methods 方法 |
|---|---|---|
| 緩存 | 有緩存，依賴不變則不重新計算 | 無緩存，每次調用都重新執行 |
| 調用方式 | 模板中直接用屬性名（不加括號） | 模板中需加括號（作為函數調用） |
| 適用場景 | 數據派生、過濾、格式化（需頻繁訪問） | 事件處理、業務邏輯（無需緩存） |
| 依賴追蹤 | 自動追蹤依賴，依賴變化自動更新 | 不追蹤依賴，需手動調用才執行 |
一句話總結
computed 是“帶緩存的派生屬性”，methods 是“無緩存的函數”。根據是否需要緩存和使用場景選擇：需要緩存且基于響應式數據派生新數據時用 computed，需要執行動作或不需要緩存時用 methods。
使用)
)
)
