【Vue.js】算出プロパティとメソッド

今回はvue.jsの算出プロパティについて書いていきます。

算出プロパティって小難しい名前だけど実はシンプル

算出プロパティ。スクリプトの中でcomputedで宣言するアレです。
テンプレート内で行う複雑な動作をスクリプトで肩代わりするやつです。

ちょっと複雑なDOM操作するとか、テンプレート内で何度も同じ処理をするとか、そういう時に使いますね。
実はこれ単純にテンプレートからmethodを呼ぶだけでも同じことが出来るのです。

・・・じゃあなんで別の機能があるのか。

僕も最初は不思議だったのですが、コンポーネント内での立ちふるまいが違うのです。コレ。

methodとcomputed

普段、書いているときは特に意識しないのですが、methodは本格的な処理、computedはテンプレートに書くほど単純じゃないけど、methodほど複雑じゃない。

ってふわっと思っていました。そう、ふわっと。

でも・・・詳しく調べてみると違うんですよね。
といっても違うのはある1点についてですが。

その1点とは
「処理が再度走るかどうか」
のみです。

算出プロパティは実行されたときに結果をキャッシュし、次回以降は結果のみを返します。
なのでメソッドとして使うのではなくて、名前の通り計算結果をプロパティとして保有する機能なのですね。
ただし、毎回結果だけを返すのではなく、依存関係にあるデータが変更されたときは再計算されます。
逆に言えばそうじゃないデータに関しては、何度呼び出しても二度と計算されないってことですね。

もっと詳しく言うと、vueインスタンス内にあるdataが更新されたら再計算されます。
DOMの状態など、インスタンスのデータじゃないものは感知できず、再計算されません。

ここは使う上での最も大きい注意点ですね。
普通に使ってて、あれ？更新されないって思うことになるかなと。

対してメソッドは通常のfunctionと同様、毎回計算されます。
こちらは説明不要だと思いますｗ

computedはキャッシュされるため、負荷や実行速度の面から言っても使えるところでは使っていくべきです。
全部methodで書けばつまづく事はないのでそうしてしまいそうですが、せっかくvueを使ってるのですから、使えるものはドンドン使っていきたいですね。

まだまだvueを覚えて日が浅いので、これから他の機能に関しても頑張って覚えていきます・・・！