Vue 3でプロップス監視

Vue 3 Composition APIでプロップスの変更を監視する方法の説明 (日本語)

Vue 3のComposition APIは、より柔軟で再利用可能なコードを書くための新しいAPIを提供します。その中で、プロップスの変更を監視する方法は、従来のVue 2のwatchオプションとは異なり、watchEffectやwatch関数を使用します。

watchEffectの使用

watchEffectは、リアクティブな値が変更されたときに実行される関数を提供します。プロップスの変更を監視するには、watchEffectの中でプロップスの値を参照します。

<template>
  <div>
    <input v-model="name" />
    <p>{{ greeting }}</p>
  </div>
</template>

<script>
import { ref, watchEffect } from 'vue';

export default {
  setup() {
    const name = ref('');
    const greeting = ref('');

    watchEffect(() => {
      greeting.value = `Hello, ${name.value}!`;
    });

    return {
      name,
      greeting,
    };
  },
};
</script>

watchの使用

watchは、特定の値を監視し、その値が変更されたときに実行されるコールバック関数を提供します。プロップスの変更を監視するには、watchの第1引数に監視するプロップスを、第2引数にコールバック関数を渡します。

<template>
  <div>
    <input v-model="name" />
    <p>{{ greeting }}</p>
  </div>
</template>

<script>
import { ref, watch } from 'vue';

export default {
  setup() {
    const name = ref('');
    const greeting = ref('');

    watch(name, (newName) => {
      greeting.value = `Hello, ${newName}!`;
    });

    return {
      name,
      greeting,
    };
  },
};
</script>

どちらの方法を使用するかは、監視する値の数や、監視する値が依存する他の値の複雑さに依存します。

<template>
  <div>
    <input v-model="name" />
    <p>{{ greeting }}</p>
  </div>
</template>

<script>
import { ref, watchEffect } from 'vue';

export default {
  setup() {
    const name = ref('');
    const greeting = ref('');

    watchEffect(() => {
      greeting.value = `Hello, ${name.value}!`;
    });

    return {
      name,
      greeting,
    };
  },
};
</script>

• watchEffectの中で、nameの値を参照し、greetingの値を更新します。
• greetingは、挨拶メッセージを保持するリアクティブな変数です。
• nameは、入力フィールドの値を保持するリアクティブな変数です。
• watchEffectは、リアクティブな値が変更されたときに実行される関数を提供します。

<template>
  <div>
    <input v-model="name" />
    <p>{{ greeting }}</p>
  </div>
</template>

<script>
import { ref, watch } from 'vue';

export default {
  setup() {
    const name = ref('');
    const greeting = ref('');

    watch(name, (newName) => {
      greeting.value = `Hello, ${newName}!`;
    });

    return {
      name,
      greeting,
    };
  },
};
</script>

• コールバック関数の中で、nameの新しい値（newName）を使用してgreetingの値を更新します。
• watchの第1引数に監視するプロップス（name）を、第2引数にコールバック関数を渡します。
• watchは、特定の値を監視し、その値が変更されたときに実行されるコールバック関数を提供します。

computedプロパティの使用

computedプロパティは、依存する値が変更されたときに自動的に再計算される値を提供します。プロップスの変更を監視し、それに基づいて計算された値を更新するには、computedプロパティを使用できます。

<template>
  <div>
    <input v-model="name" />
    <p>{{ greeting }}</p>
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const name = ref('');

    const greeting = computed(() => {
      return `Hello, ${name.value}!`;
    });

    return {
      name,
      greeting,
    };
  },
};
</script>

toRefとwatchの使用

toRefは、リアクティブなオブジェクトからリアクティブな参照を作成します。toRefを使用してプロップスの参照を作成し、watchでその参照を監視することができます。

<template>
  <div>
    <input v-model="name" />
    <p>{{ greeting }}</p>
  </div>
</template>

<script>
import { ref, toRef, watch } from 'vue';

export default {
  setup(props) {
    const nameRef = toRef(props, 'name');

    watch(nameRef, (newName) => {
      // ここでgreetingを更新する
    });

    return {
      // ...
    };
  },
};
</script>

これらの代替方法を使用するかどうかは、プロップスの変更を監視する目的や、コードの構造や読みやすさに依存します。

• toRefとwatchは、プロップスの参照を直接監視し、より柔軟な制御が必要な場合に適しています。
• computedプロパティは、プロップスの変更に基づいて計算された値を簡単に更新したい場合に適しています。