Vue3 の結合 API で watch 属性を使用するにはどうすればよいですか?

最後に、Vue 3 の結合 API 部分に到達しました。朗報です。Vue 3 の結合 API により、コードがより簡潔になるだけでなく、保守も容易になります。今日は、Vue インスタンスのデータ変更を監視できるアーティファクトである watch 属性について話しましょう。

まず、watch 属性とは何かを理解する必要があります。簡単に言うと、時計はデータの変化を監視し、データが変化したときに対応する操作を実行する監視カメラのようなものです。Vue 3 では、watch 属性を使用してリアクティブデータの変更をリッスンし、独自のロジックを実行します。

では、watch 属性はどのように使用するのでしょうか? 実は非常に簡単で、Vue インスタンスに監視オブジェクトを定義し、監視対象のデータをキー、実行するコールバック関数を値として設定するだけです。データが変更されると、コールバック関数が自動的にトリガーされます。

以下は、watch 属性を使用してデータの変更を監視する方法を示す簡単な例です。

import {
    
     ref, watch } from 'vue';  
  
const count = ref(0);  
  
watch(count, (newVal, oldVal) => {
    
      
  console.log(`Count changed from ${
      
      oldVal} to ${
      
      newVal}`);  
});  
  
count.value++; // 输出：Count changed from 0 to 1

この例では、count というリアクティブデータを作成し、watch 属性を使用してその変更をリッスンします。count の値が変化すると、コールバック関数がトリガーされ、count の値が古い値から新しい値に変化するという情報が出力されます。

もちろん、watch 属性は単一データの変更を監視するだけでなく、オブジェクトや配列の変更も監視できます。オブジェクトの変更をリッスンしたい場合は、以下に示すように、監視オブジェクトの関数を値として渡すことができます。

import {
    
     ref, watch } from 'vue';  
  
const user = ref({
    
     name: 'John', age: 30 });  
  
watch(user, (newVal, oldVal) => {
    
      
  console.log(`User changed from ${
      
      JSON.stringify(oldVal)} to ${
      
      JSON.stringify(newVal)}`);  
});  
  
user.value.name = 'Bob'; // 输出：User changed from {"name":"John","age":30} to {"name":"Bob","age":30}

この例では、user という名前のリアクティブオブジェクトを作成し、watch プロパティを使用してその変更をリッスンします。ユーザーの属性が変更されると、コールバック関数がトリガーされ、ユーザーの値が古い値から新しい値に変更されたという情報が出力されます。

watch 属性を使用してデータの変更を監視する場合、コールバック関数の実行は非同期であることに注意してください。データが変更された直後に何らかの操作を実行する必要がある場合は、immediate 属性を使用して、データが変更されたときにすぐにコールバック関数を実行することができます。

import {
    
     ref, watch, immediate } from 'vue';  
  
const count = ref(0);  
  
watch(count, (newVal, oldVal) => {
    
      
  console.log(`Count changed from ${
      
      oldVal} to ${
      
      newVal}`);  
  immediate(() => {
    
      
    console.log(`Count is now ${
      
      newVal}`);  
  });  
});  
  
count.value++; // 输出：

もちろん、watch 属性は万能ではありません。欠点は、データが変更されるたびにコールバック関数がトリガーされることです。データが頻繁に変更されると、パフォーマンスの問題が発生する可能性があります。したがって、実際の開発では、watch 属性を使用するか、computed 属性やメモ化技術を使用するなど、よりパフォーマンスの高いソリューションを状況に応じて選択する必要があります。

上記のコードは、Vue 3 の複合 API で watch 属性を使用してデータの変更を監視する方法を示しています。watch 属性を使用すると、個々のデータ、オブジェクト、または配列の変更を監視し、データが変更されたときに対応するコールバック関数を実行できます。コールバック関数の実行は非同期ですが、immediate 属性を使用すると、データが変更されたときにすぐに実行されるようにできます。watch 属性のパフォーマンスのオーバーヘッドは比較的高いため、実際の開発では、特定の状況に基づいて適切なソリューションを選択する必要があることに注意してください。

つまり、watch 属性は Vue 3 の非常に便利な機能です。これにより、データの変更をより簡単に監視し、データ変更時に対応する操作を実行できます。初心者の皆さんもしっかり勉強して柔軟に使いこなしていただければと思います！

Vue3 の結合 API で watch 属性を使用するにはどうすればよいですか?

おすすめ