このような疑問をお持ちの方に向けて書いています。
- それぞれの特徴を理解する
- 使い方を理解する
この2点に注意しながら学べば使えるようになるよ。
Vue.jsの基本は以下の記事でも扱っているのでご覧ください。
Vue.jsのmethods、computedの比較
methods、computed、watchは似ていて違いがわかりにくいという話をよく聞くので整理してみます。
Vue.jsでボタンをクリックするとカウントアップ、カウントダウンするというものをサンプルで作ってみました。
上がcomputedで処理される部分。下がmethodの部分です。
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<p>computed [{{ count1 }}]</p>
<p>{{ clickCount1 }}</p>
<button v-on:click="count1 += 1">カウントアップ</button>
<button v-on:click="count1 -= 1">カウントダウン</button>
<hr />
<p>methods [{{ count2 }}]</p>
<p>{{ clickCount2() }}</p>
<button v-on:click="count2 += 1">カウントアップ</button>
<button v-on:click="count2 -= 1">カウントダウン</button>
</div>
var app = new Vue({
el: '#app',
data: {
count1: 5,
count2: 5
},
computed: {
clickCount1: function() {
console.log('count1')
return this.count1 > 5 ? '5より大きい' : '5以下'
}
},
methods: {
clickCount2: function() {
console.log('count2')
return this.count2 > 5 ? '5より大きい' : '5以下'
}
}
})
computedの特徴
computedの方にあるカウントアップ、カウントダウンのボタンがクリックされると、computedのclickCount1が呼び出されるという動作です。
公式では、computedプロパティについて以下のような説明をしています。
算出プロパティはリアクティブな依存関係にもとづきキャッシュされるという違いがあります。算出プロパティは、リアクティブな依存関係が更新されたときにだけ再評価されます。
参照元: Vue.js公式
computedの場合は、参照先（count1）に変更がない時は呼び出されないという特徴がある。他の値(count2)が変更になっても呼ばれない。
変更前の値をキャッシュしていて、（count1）に変更があった場合のみ書き換えるということですね。
算出プロパティ example は、vm.msg という1つだけの依存関係を持っています。Date.now() というタイムスタンプは、Vue のデータ監視システムとは何も関係ないため、リアクティブな依存関係ではありません。
参照元: Vue.js公式
var vm = new Vue({
data: {
msg: 'hi'
},
computed: {
example: function () {
return Date.now() + this.msg
}
}
})
公式ではDate.now()のようなリアクティブな依存関係にないためDate.now()が変更されても呼び出されない。this.msgに変更があった時のみ再評価されるとあります。
computedのexampleはDate.new()に変更があった場合でも呼ばれそうと思ってしまうので注意したいですね
methodsの特徴
methodsの方にあるカウントアップ、カウントダウンボタンがクリックされると、methodsのclickCount2が呼び出されるという動作です
メソッド呼び出しは、再描画が起きると常に関数を実行します。
参照元: Vue.js公式
methodsの場合はVueインスタンスに変更が合った場合に再描画されるという特徴がある。
computedとmethodsの違い
computedはプロパティでmethodsは関数であるという違いがあります。
computedはキャッシュされているため、count1の値に変更がないと呼ばれないけれども、methodsは他の値が書き換わっても呼ばれてしまい処理が走ってしまう。
頻繁に画面の値が書き換わるような場合は、computedを使う方が良いとされています。
値が何度も変更されると毎回methodsプロパティは呼び出されるため、クライアント側の動作が重くなる可能性があるということですね。判断してmethodsとcomputedを使い分ける必要がありそうです。
watchとcomputedの比較
watchとcomputedは似ていて使い分けに悩むと思います。
watchの特徴
watchは監視プロパティで値が変わった時に呼ばれる。公式の説明は以下です。
データが変わるのに応じて非同期やコストの高い処理を実行したいときに最も便利です。
参照元: Vue.js公式
watchとcomputedの使い分けは？
基本的にcoumputedを使うが、非同期処理を行う場合はreturnが使えないため、returnをするcomputedプロパティを使えない。そのような場合にwatchを使用するべきということです。
まとめ
computedやmethodsをテンプレート内に記述することが可能な場合もあると思いますが、それをしてしまうとテンプレートが複雑化してしまいます。
Vue.jsは多くの場合、フロントエンドエンジニアの範疇ですが、サーバーサイドのエンジニアも触るし、コーディングする人たちも触ることもあると思う。
そのような場合にテンプレートが複雑になっているとメンテナンスしにくいので、積極的にcomputedあたりを使っていくのがベターかと思います。
