Vue.jsでのmethodsとcomputedの違い
違いは「キャッシュ」です。
methodsは、処理が呼び出されるとつねに処理を実行する。
computedは、参照するプロパティが変更した時にのみ再計算され、変更のない場合は、以前算出した値を即座に返す。
ついでにfilterとも比較
| 方法 | キャッシュ | 利用場面 |
|---|---|---|
| methods | しない | 主にユーザーアクションのイベント処理に利用 |
| computed | する | 主に画面表示項目に利用 |
| filter | しない | アプリケーション共通の処理で利用 |
サンプルコード
html部分
<div id="main">
<button @click="update = !update">更新</button>
<p v-if="update">
methods: {{ method() }} <br/>
computed: {{ prop }}
</p>
</div>
vueの部分
new Vue({
el: "#main",
data: {
update: true
},
methods: {
method() {
return new Date.toLocaleString();
}
},
computed: {
prop() {
return new Date.toLocaleString();
}
}
});
サンプルコードのページにアクセスすると
methods: 2020/1/1 1:00:00
computed: 2020/1/1 1:00:00
が表示される。更新のボタンを押すと
methods: 2020/1/1 1:00:10
computed: 2020/1/1 1:00:00
と表示される。
methodsは更新されるが、キャッシュがあるためcomputedは更新されない。