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