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については改めたいと思います。
