kurosame’s diary

日々やったことで気になったことをメモしてます

Vue.js の data と methods と computed の使い分けについて

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 を使うケースは

  • 変更が多くキャッシュしても意味が無い変数を定義したいとき
  • リアクティブな変数を定義したいとき