こんにちは。
野中やすおです。
今回の記事では、ついつい混同しやすいVue.jsにおけるmethods、computed、watchプロパティの概要と使い分けについて整理してみました。
methodsとは
methodsプロパティは、その名の通り、Vueインスタンスのメソッドを定義するために使用されます。以下に使用例を書きます。例えばクリックイベントに対応する詳細な処理を書きたい場合には、しばしばmethodsの中でメソッドを定義します。
|
1 2 3 4 5 |
methods: { handleClick() { // クリックイベントに対応する処理 } } |
またComposition APIでは、methodsは通常の関数と同様に定義できます。以下は、script setupの中でmethodsを定義した例です。
|
1 2 3 4 5 6 7 |
<script setup> // 通常の関数と同じように定義する const handleClick = () => { // クリックイベントに対応する処理 } }; </script> |
methodsは、イベントハンドラーやボタンのクリックなど、単純な関数の処理を定義したいときに使用されやすいです。
Vue.js - The Progressive JavaScript Framework…
computedとは
computedプロパティは、データプロパティに基づいて動的な値を計算するために使用されます。computedプロパティは、キャッシュされて、依存するデータプロパティが変更されない限り再計算されることがありません。
|
1 2 3 4 5 6 |
computed: { computedProperty() { // データプロパティに基づいて計算される値を返す return this.dataProperty * 3; } } |
またComposition APIでは、computedはimportして定義できます。以下は、script setupの中でcomputedを定義した例です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<script setup> import { computed } from 'vue'; export default { setup() { const count = ref(0); const doubledCount = computed(() => count.value * 3); // オブジェクトを返して、テンプレート内で使用する変数や関数を公開します return { doubledCount }; }, }; </script> <template> <div> <p>Count: {{ count }}</p> <p>Doubled Count: {{ doubledCount }}</p> </div> </template> |
computedプロパティは、データの変更を監視せずに値を計算するため、単純な計算やフィルタリングなどの処理を定義するのに適しています。
Vue.js - The Progressive JavaScript Framework…
watchとは
watchプロパティは、データの変更を監視し、変更があった場合に対応する処理を実行するために使用されます。
特定のデータプロパティを監視し、その値が変更された場合に関数を実行します。
|
1 2 3 4 5 |
watch: { dataProperty(newValue, oldValue) { // データの変更に対応する処理 } } |
watchプロパティは、データが変更された際に非同期な処理を行ったり、APIリクエストを発行したりするのに適しています。
Vue.js - The Progressive JavaScript Framework…
使い分けのまとめ
- methodsは、単純な関数の処理を定義したいときに使用する。
- computedは、単純な計算やフィルタリングなどの処理を定義したいときに使用する。
- watchは、非同期な処理を行ったり、APIリクエストの発行処理を定義したいときに使用する。
参考
Vue.js - The Progressive JavaScript Framework…
