今天練習到 Vue 裡面的 methods（方法），過去使用純 JS 監聽事件觸發後，就會透過函式來做一連串的取值操作，而 methods 就是收集各種方法的區塊。

Methods

先來看一段程式碼

// JS
const vm = Vue.createApp({
  data () {
    return {
      money: 100,
      times: 100
    }
  },
  methods: { //此處開始為 methods 區域
    rewards () {
      return this.money * this.times;
    }
  }
}).mount('#app');

// HTML
<div id="app">
  <p> 投入： {{ money }} 元</p>
  <p> 倍率： {{ money }} </p>
  <p> 獎金： {{ rewards() }} 元</p> <!--此處呼叫 methods方法-->
</div>

• 在 methods 中要使用 data 裡面的屬性需要使用 this 來存取。
• 在 HTML 使用 methods 時需要有小括號（函式的方式），也可以設計成帶參數的方式執行。

Computed

Computed 和 Methods 寫法可以說是一模一樣，下面是一段範例：

// JS
const vm = Vue.createApp({
  data () {
    return {
      money: 100,
      times: 100
    }
  },
  computed: { // 這裡不一樣而已
    countRewards () {
      return this.money * this.times;
    }
  }
}).mount('#app');

Methods 與 Computed 差異比較

• 兩者的差異在於， computed 會把計算後的結果暫存起來，如果裡面使用的資料沒有變動，就不會重複執行；反之，methods 只要在 HTML 裡面被使用幾次就會執行幾次。

• 在實際使用上，如果是相同的計算重複使用，可以使用 computed 來節省效能。

• computed 的缺點是無法帶入參數，所以在設計時需考量，如果有有帶入參數的需求，就應使用 methods。