Vue で computed と watch はどう使い分けるか

Question

Vue 3 では computed も watch も state 変化に関係する。実装時にどちらを使うべきか、どう見分けるべきか。

第一の判断軸は、新しい値を作りたいのか、何かを起こしたいのか だ。

computed は、既存 state から導かれる派生値を表現するための仕組みである。返り値として扱え、依存が変わった時だけ再計算される。つまり UI 表示用の整形値、条件判定、集計値のような「読むための値」を作る時に使う。

一方 watch は、state の変化を契機に副作用を実行するための仕組みである。API 呼び出し、localStorage 同期、タイマー操作、外部ライブラリ操作など、Vue の外側に影響が出る処理に向いている。

したがって判断は次のようになる。

両者はどちらが上位という話ではなく、役割が違う。computed は宣言的な派生値、watch は副作用のフックである。