###### tags:`Vue`
# Vue mounted methods computed 差異

這是我買六角學院Vue課程問老師助教問題,以下有助教Eva回答,做個記錄.

> Question:
> mounted computed methods
>
> 請問這三者間使用時機和定義是什麼呢?
>
> 特別是methods 和 computed 都可以寫function

### (1) 關於 methods

如同[官方文件](https://cn.vuejs.org/v2/api/#methods)所述，

**methods 就是互動的函式，**

<span style="color:red">需要觸發才會運作，並且會用來修改資料內容。</span>

例如：

透過 v-on 指令監聽 DOM 事件，

當觸發事件時執行特定函式的 JavaScript 程式碼，

因此屬性 methods 的內容包含不同的函式。

### (2)關於 Computed

如同[官方文件](https://cn.vuejs.org/v2/api/#computed)所述，

computed 是在監控資料更動後，重新運算結果呈現於畫面上，

<span style="color:red">一般來說不會修改資料，只會回傳用於畫面呈現的資料。</span>

而 **computed 有一個特性「暫存」，每次呼叫函式時會把結果暫存起來**，

因此要留意，

**讓 computed 更新的條件，是原始資料必須變更**，

換句話說資料沒變動的話就不會觸發 computed 更新。

*延伸閱讀:Methods 與 Computed 的使用情境*

## (3) 關於 mounted

如同[文章](https://blog.csdn.net/xdnloveme/article/details/78035065)所述，

設定好一個 Vue.js 的實體之後，

該如何透過生命週期操控從創建到銷毀的一個過程。

其中 mounted 是「在模板渲染成 HTML 結構後，對 DOM 節點進行一些操控」。

*延伸閱讀: Vue 生命週期的簡報說明*

### 註一:Methods 與 Computed 的使用情境

- computed 是在監控資料更動後，重新運算結果呈現於畫面上

一般來說不會修改資料，只會回傳用於畫面呈現的資料

- methods 就是互動的函式，需要觸發才會運作

會用來修改資料內容

效能

如果資料量大，computed 自然會比較慢

只要資料變動就會觸發，無形之中執行次數也會增加勒

因此在大量資料時，會建議透過 methods 減少不必要的運算喔