【Vue.js】methods,computed,watchの発火タイミングを監視で確認

methods,computed,watchの説明

・methods:関数を呼ばれたら必ず発火します。
　template内にmethodsの関数が記載されていたら描画の度に発火します。
・computed:関数内に使われている値に変化が生じた時に発火します。
　template内にcomputedの関数が記載されていても↑の条件を満たさない場合発火しません。
・watch:監視対象になっている値が変化した場合発火します。

コンソールによる発火タイミングの確認

methodsによるカウントアップと意味のない再描画する用のカウントアップの２つのボタンを以下のように用意します。
コンソールログによる実行確認をしているので実際にCODEPENに飛んで見る必要があります。・・・
以下の画面は
・methods,computedはcountが5以上になった時に画面にtrueと表示されます。
・countが10になったときwatchはcountを0にします。

See the Pen VueMethodComputedWatch by Yishida (@yishida05) on CodePen.

methods,computed,watchの発火タイミング

・methodカウントアップボタンでカウントは+1され、
methods,computed,watchそれぞれ発火されます。

・意味ないカウントアップボタンで意味ないカウントは+1され、同時にカウントの再描画のためmethodsの発火がログで確認できます。
再描画されてもcomputedは発火されないことが確認できます。

・methodカウントアップボタンを5回押すとmethod5以上チェック、computed5以上チェックにtrueが表示されます。
・methodカウントアップボタンを10回押すとカウントがゼロになり、そのタイミングで
watch発火←9から10への変更の発火
watch発火←10から0への変更の発火
methods発火
computed発火となることがわかります。
（詳しく調べてませんが、methods,computedよりwatchの発火が早いみたいですね・・・）

まとめ

今まであまり気にせずほとんどmethodsを使っていましたが、再描画や再計算などを最小限に抑える場合にはwatchやcomputedが扱えると良いかもですね。