tanatiyo 以下、調べた作業用のメモです。
Compositon APIでcomputedとmethodsを使い分ける際には、それぞれの特徴や用途を理解し、適切に活用することが重要です。以下は、両者の違いと使い分けに関する基本的な考え方です：
computed:
- 計算プロパティ:
computedは、依存するリアクティブ変数が変更されたときに自動的に再計算される計算プロパティを作成するのに適しています。 - キャッシュ:
computedはキャッシュされ、同じ依存がある場合は再計算されずに以前の計算結果を返します。これにより、不要な再計算を避けることができます。 - リアクティブな監視:
computedはリアクティブ変数に依存しており、その変数が変更されると自動的に再計算されます。
methods:
- メソッド:
methodsは通常のJavaScriptの無名関数やアロー関数と同様に、明示的に関数を定義するために使用されます。 - 即時評価:
methodsは毎回呼び出されるため、即座に評価されます。computedのようにキャッシュされず、依存変数が変更されても毎回再実行されます。 - 外部の値へのアクセス:
methods内では、コンポーネント内のデータやメソッドにアクセスする際にthisを使用する必要があります。
使い分けのポイント:
- 再評価が不要で計算結果をキャッシュしたい場合:
computedを使用して計算プロパティを作成します。例えば、テンプレート内で頻繁に利用される計算結果がある場合。 - 即座に実行され、リアクティブなデータを変更する場合:
methodsを使用します。例えば、ボタンクリックなどの即時実行が必要な場面。 - コンポーネントのメソッドやロジックが必要な場合:
methodsを使用して通常の関数を定義します。例えば、データの取得やサービスとのやり取りなど。
注意点として、computedはリアクティブな変数に依存しているため、リアクティブでない外部の値を参照する場合にはmethodsを使用する必要があります。
状況によっては、両方を組み合わせて最適な実装を行うこともあります。適切なツールを選択し、コードを読みやすく保ちつつ、パフォーマンスを向上させることが求められます。