技術ブログ

(技術系中心)基本自分用備忘録なので、あくまで参考程度でお願いします。

算出プロパティ computed

算出プロパティ

メソッド
メソッドなので呼び出しには()がいる
計算結果をキャッシュしないので、一度計算を行った場合も関数を呼び出される度に再計算を行う
使えるのはgetterのみでsetterは使えない

computed

算出プロパティ
データそのものに何らかの処理を与えたものをプロパティにしたい(インスタンスに持たせて参照できるようにしたい)ときに用いる  
計算結果をキャッシュする  
一度計算を行った場合、再度関数を呼び出しても依存しているデータに変更がない限りキャッシュを返す  
プロパティなので呼び出し時の()はいらない  
getterとsetterが使える  

算出プロパティとメソッドの違い

参考:

【Vue.js】computedとmethodsの違いとは?【初心者向け】

■ プロパティとメソッド

computed
-> ()が不要

methods
-> ()が必要
 {{ hoge() }}

  {{ hoge }}

的な

■ getter, setter

computed
-> getter, setter
setterはなくてもOK

methods
-> getter

■ キャッシュ

computed
-> する

methods
-> されない

getter setter の具体例

new Vue({
  el: "#app",
    data: {
    basePrice: 100
  },
  computed: {
  taxIncludedPrice: {
    get: function() {
        return parseInt(this.basePrice * 1.08)
    },
    set: function(taxIncludedPrice) {
     this.basePrice = Math.ceil(taxIncludedPrice / 1.08)
    }
  }
  }
})
<div id="app">
  <p>
    base price: <input type="text" v-model="basePrice">
  </p>
    <p>
    tax included: <input type="text" v-model="taxIncludedPrice">
  </p>
</div>

--> 二つのinputの値を変更すると、動的に値も変更される

Vue - JSFiddle - Code Playground