kazuki.m
computedとメソッドって何が違うのでしょうか？
やってみたこと
- computedとメソッドで同じ処理を作成して比較する
- どんな違いがあるか？紹介する
サンプルコード
比較結果
まずは上記サンプルコードについて簡単な説明。
ある入力値（文字列）のlengthを取得する処理をcomputedとmethodで同じ作成しています。
画面にはそれぞれ入力した文字列のlengthを表示しています。
お気づきかと思いますが、表示内容（文字数の算出）は同じになります。
では、何が違うのか？
違いを調べるためにブラウザの検証を押下します。
＊ ブラウザ上で右クリックするとプロパティに「検証」があります。
＊ 検証 >> 右側の画面にコンソールが表示される >> ツールバーのConsoleを開く
注目していただきたいのはログに出力している部分です！！
画面表示段階で、computedは1回、functionは3回実行されています。
これは画面の再描写（ライフサイクルイベント）の度にfunctionは毎回実行されるからです。（ライフサイクルイベントのタイミングのはず・・・）
一方、computedは初回（初めの描写）のみになります。computedはキャッシュされており、再描写ごとには実行されていないことが確認できました。
続いて、全く関係がない入力フォームを作成し、こちらに適当な入力をしてみます。
全く関係がない入力処理にも関わらずfunctionは入力ごとに処理が実行されていることが確認できました。
差は出にくいけど明確に違う点がある
小規模なアプリケーションでは違いは分かりにくいかも知れませんが、再描写ごとに毎回実行されるfunctionと
依存関係にあるリアクティブ変数が変化した時のみ実行されるcomputedという違いが明確にできたかと思います。
この違いを踏まえて効率的な実装をしていきたいと思います！
