【Vue.js】computedとmethodの違い

computedとmethodは同じ描画をしてくれますが、下記違いがあります。
この違いが公式ページでも書かれていますので、リンクを貼ります。
>vue.js公式ページ

スポンサーリンク

computed

依存関係が更新された時だけ実行する。
呼び出す時に()がいらない。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <p>{{count}}</p>
  <button @click="count += 1">counter</button>
  <p>{{toTen}}</p>

</div>

<script>
  new Vue({
		el:'#app',
    data:{
    	count:0
    },
    computed:{
    	toTen: function(){
   		return this.count >= 10 ? '10以上になりました' : ''
    	}
    }
	})
</script>

method

結果はcomputedと同じだが、再描画が起きると常に実行する。
呼び出す時に()が必要。()をつけないとTEXTが表示される。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <p>{{count}}</p>
  <button @click="count += 1">counter</button>
  <p>{{toTen()}}</p>

</div>

<script>
  new Vue({
		el:'#app',
    data:{
    	count:0
    },
    methods:{
    	toTen: function(){
   		return this.count >= 10 ? '10以上になりました' : ''
    	}
    }
	})
</script>

上記のcomputedとmethodはreturnを使用しているので、同期処理の実行となります。
非同期処理の実行をしたい時は、watch(ウォッチャ)を使用します。
watchについては改めたいと思います。

タイトルとURLをコピーしました