[Vue.js]computed

computedはどう使うのか

//クリックされた回数
    <p>{{num}}</p>
//クリックするたび１増えるボタン
    <button @click ="countUp">+1</button>
    <p>{{lessThanThree}}</p>

//クリックした時に表示される回数。初期値は0
 data:{num: 0},
    computed:{
//クリックが３より上の時と３以下の条件指定　左true:右fauls
       lessThanThree:function(){
         return this.num > 3 ? '3より上' : '3以下'
        }
  },

書き方としてはmethodsと同じ

methodsと書き方が同じなら何故methodsに書かないのか

理由はその対象以外が書き換えられたときにも一緒に動作してしまうから

computedに記述している場合はその条件が書き換わる瞬間だけプログラムが変わるようにしてくれるらしいです。

二重中括弧に複雑な処理を入れるときは必ずmethodsではなくcomputedに入れる