文章目錄
- 一 概述
- 二 核心區別
- 三 聯系
- 四 使用原則
一 概述
在 Vue 中，計算屬性（computed） 和 方法（methods） 都可以用于處理數據邏輯，但它們的核心區別在于 緩存機制 和 觸發方式 。
計算屬性示例：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>demo</title>
</head><body><!-- 使用computed --><div id="app"><button v-on:click="a++">a+1</button><button v-on:click="b++">b+1</button><p>number + a = {{add1}}</p><p>number + b = {{add2}}</p></div><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><script>const vm = Vue.createApp({data() {return {a: 0,b: 0,number: 30};},computed: {add1: function() {console.log("This is add1 computed function: " +this.a);return this.a + this.number;},add2: function() {console.log("This is add2 computed function: " +this.b);return this.b + this.number;}}}).mount("#app");</script>
</body></html>
頁面加載時，控制臺打印結果如下：
This is add1 computed function: 0
This is add2 computed function: 0
連續點擊2次a+1按鈕，再點擊一次b+1按鈕，控制臺運行結果如下：
二 核心區別
| 特性 | 計算屬性（computed） | 方法（methods） |
|---|---|---|
| 緩存機制 | 基于依賴的響應式數據自動緩存，依賴不變時直接返回緩存值。 | 無緩存，每次組件渲染時都會執行。 |
| 觸發時機 | 僅當依賴的響應式數據變更時重新計算。 | 每次渲染或調用時都會執行。 |
| 調用方式 | 在模板中直接當作屬性使用（無需調用）。 計算屬性的調用不能使用括號，例如 add1、add2。 | 必須顯式調用，需要加上括號，例如 add1()、add2()。 |
| 適用場景 | 復雜邏輯、依賴其他數據且需緩存的場景（如過濾、計算衍生值）。 | 事件處理、不依賴緩存的動態操作（如提交表單）。 |
而
三 聯系
共同點
- 都可以處理數據邏輯，返回衍生值。
- 都能訪問組件實例的 data、props 等屬性。
互補場景
- 計算屬性適合 高開銷、依賴明確 的邏輯（如過濾列表、復雜計算）。
- 方法適合事件驅動或無需緩存的操作（如表單提交、動態參數生成）。
四 使用原則
計算屬性相較于方法更加優化，但并不是什么情況下都可以使用計算屬性，在觸發事件時還是使用對應的方法。計算屬性一般在數據量比較大、比較耗時的情況下使用(例如搜索)，只有虛擬DOM 與真實 DOM 不同的情況下才會執行 computed。如果你的業務實現不需要有緩存，計算屬性可以使用方法來代替。
優先使用計算屬性 ：
當需要根據響應式數據動態生成值，且該值會被多次使用或計算成本較高時。
使用方法 ：
當邏輯不依賴響應式數據，或需要顯式觸發（如按鈕點擊事件）。
