Vue.js で変数や関数を定義する時に data と methods と computed のどのオプションを使って書くのか
たまに迷うことがあるので、現状の理解の簡単なメモです
data と methods と computed の違い
- data はコンポーネントの（編集可能な）ローカル変数
- methods は関数
- computed はプロパティ（値に変数も関数も定義できる）
基本的に computed を使うで良い
computed はデフォルトは getter 関数のみを提供しているため、Read-Only なプロパティを定義できる
※ ちなみに setter 関数も書けますcomputed で定義したプロパティはキャッシュされる
computed は Vue インスタンスを作成する際に、Watcher を生成している
computed 内で data や props など を参照していた場合、data や props などの変更を Watcher に通知している
⇒ Vue インスタンス生成時にプロパティをキャッシュしておき、Watcher に通知があった時のみプロパティを再評価する仕組み
まとめると computed を使うと良い点は
- 簡単に Read-Only なプロパティを定義できる
- プロパティの中身で外部（data や props など）参照してても、キャッシュされる
もちろん単純な定数的なプロパティもきちんとキャッシュされる - watch を使っている箇所を減らせるかも
例えば props を watch して data の変数を更新する処理など computed のみで実装可能なパターンがけっこうあるかも
methods を使っているケース
引数を必要とする
data や computed などで定義されてない Vue.js 外の変数や関数を引数として渡す場合、computed ではキャッシュできないので、methods に書いている関数内でイベントを発火している
キャッシュ時に emit とかでイベントが発火されると困る場合は、methods に書いている また、関数が呼ばれる度に常に実行したい処理があるとき
まとめると methods を使うケースは
- Vue.js で管理していないパラメータを引数として渡すとき
- キャッシュされると困る処理があるとき
data を使っているケース
- 変更が多い変数
キャッシュしても変更が多い変数はキャッシュする意味があまり無いので、data に書いてる - リアクティブな変数を宣言したい時
変更をリアクティブに画面反映させたい時
まとめると data を使うケースは
- 変更が多くキャッシュしても意味が無い変数を定義したいとき
- リアクティブな変数を定義したいとき
