提姆寫程式

0%

Vue 筆記 - computed 與 methods 的差別

發表於 分類於 Disqus：
結果相同，但背後運算結果大不同

vue.js

前一篇在 v-on 事件中有使用 methods 屬性，但使用的情境不同，簡單來說如果計算結果不需重複使用，可以使用 computed，若會重複使用則選擇用 methods。

methods

前面例子有提到，只要使用 v-on:click 事件就會對應一個 methods 的屬性，而通常會使用在反覆用到的情境中，Vue 筆記 - 使用 v-on 處理互動式行為這邊的使用情境都是會反覆運算與執行的，methods 只要重新渲染網頁，就一定會執行當中的 function。

computed

雖然執行結果會與 methods 相同，但背後處理的方式不同，尤其是在效能優化處理上有差別，computed 的計算屬性，只有在觀察到透過 this 綁定的屬性變化後才會更新，所以在觀察到之前是不會有運算結果，使用的方式就是在 computed 的屬性中，是以物件做為呈現，並在其中帶入一個函式，並且 return 這個函式的物件內容，重要的地方是， computed 裡面的函式屬性也是一個物件。

1
2
3
4
5
computed:{
fnName:fn(){

}
}

寫一個簡單的計算機

有兩個 input，輸入數字後讓其結果自動相加，就可以使用 computed。

1
2
3
4
5
6
<div id="app">
  <div>
    <input type="text" v-model.number="num1" /> +
    <input type="text" v-model.number="num2" /> = {{ sum }}
  </div>
</div>

定義好兩個數字起始值為 0，透過雙向綁定使其輸入數值時，也讓資料同時變動，最後透過 computed 加總後得到預期的值，要使用 this 指向資料本身，才會進行運算。

1
2
3
4
5
6
7
8
9
10
11
12
var vm = new Vue({
  el: "#app",
  data: {
    num1: 0,
    num2: 0,
  },
  computed: {
    sum() {
      return this.num1 + this.num2;
    },
  },
});

寫一個匯率計算機

因為計算匯率不需要反覆計算，只要計算一次就可以得到結果，所以這邊使用 computed 做為計算的屬性。

匯率查詢連結 -台灣銀行牌告匯率

HTML

先寫好表單架構與要帶入的模板語法，因為我今天要轉換的是日幣換台幣，所以起始的幣值是日幣。

1
2
3
4
5
<div id="app">
  <p>1 日幣 = 0.269 台幣</p>
  <div>日幣 <input type="text" v-model="jpy" /></div>
  <div>約 {{ twd }} 元新台幣</div>
</div>

Vue

  1. 因為要計算的是日幣轉換成台幣匯率，所以輸入的是日幣的初始值。
  2. 在資料中先給予日幣值為 0，計算轉換為台幣。
  3. computed 中給予一個 twd 的屬性名稱，裡面是一個函式，回傳的結果是 twd 這個值為日幣資料本身去 * 0.269，就會得到預期的運算結果。
1
2
3
4
5
6
7
8
9
10
11
12
const vm = new Vue({
  el: '#app',
  data: {
        jpy: 0;
  },
  computed: {
    twd: function () {
      return twd = this.jpy * 0.292;
    }

  },
});