Vue で watchEffect を使用して応答データを監視し、DOM を更新する方法

フロントエンド フレームワークとしての Vue の中核の 1 つはデータ駆動型ビューです。 Vue で定義されたデータが変更されると、対応するビューも更新されます。 Vue3 では、パフォーマンスと応答速度を最適化するために、リアクティブ システムとコンポジション API が導入されています。 watchEffect は応答性の高いシステムの一部として、データの変更を監視し、DOM を即座に更新できます。この記事では、Vue で watchEffect を使用して応答データを監視し、DOM を更新する方法を詳しく紹介します。

1. レスポンシブ システム

Vue3 では、レスポンシブ システムの中核は「リアクティブ オブジェクト」と呼ばれる通常の JavaScript オブジェクトです。 reactive 関数を使用してオブジェクトを応答型オブジェクトに変換することにより、Vue はこのオブジェクト内のデータの変更を追跡し、応答することができます。

レスポンシブ システムで使用される主な API は次のとおりです。

1. reactive: 通常の JavaScript オブジェクトをレスポンシブ オブジェクトに変換します。
2. ref: 通常の JavaScript オブジェクトを応答性の高いオブジェクトに変換し、そのオブジェクトに .value 属性を追加すると、オブジェクトの値に直接アクセスしてその値を変更できます。テンプレートで使用する場合は.valueを使用して操作する必要があります。
3. toRefs: レスポンシブ オブジェクトを通常の JavaScript オブジェクトに変換します。各プロパティは ref オブジェクトとしてカプセル化されます。
4. computed: 計算されたプロパティを定義すると、戻り値は応答オブジェクトになります。応答オブジェクトに対する計算プロセスの依存関係が変化すると、計算関数は自動的に再計算され、更新されます。

2. watchEffect

watchEffect は Vue3 の新しい API です。応答するオブジェクトに基づいて、監視する必要がある依存関係を自動的に推論できます。依存データが変更されると、watchEffect が実行されます。 will コールバック関数はすぐにトリガーされます。 watchEffect の使用方法は computed と似ていますが、watchEffect はプロパティにアクセスする必要はなく、コールバック関数でリアクティブ オブジェクトを直接使用するだけで済みます。

watchEffect には以下の特徴があります。

1. watchEffect の実行時間は Dom が更新される前であるため、この関数でデータを更新した後すぐに使用できます。
2. watchEffect は、依存関係を手動で指定しなくても、応答データの変更を自動的に追跡できます。
3. watchEffect はパラメータのないクリーンアップ関数を返す必要があります。watchEffect の関連依存関係が変更されて再実行されると、リソースを解放するためにクリーンアップ関数が自動的に呼び出されます。

watchEffect を使用する際の注意点は次のとおりです。

1. watchEffect では、過度に時間のかかる操作を実行しないでください。これらの操作は、データが更新されるたびに実行されるためです。
2. 特定のデータの変化を正確に監視する必要がある場合は、watch 関数または watchEffect の依存パラメーターを使用して指定する必要もあります。

3. watchEffect を使用して DOM を更新する

Vue の単一ファイル コンポーネントで watchEffect 関数を使用し、コールバック関数で DOM 構造を更新できます。こうすることで、コンポーネント内のリアクティブ データが変更されるたびに、結果の変更をすぐに確認できます。

以下では、watchEffect 関数の使用法を示すための例としてカウンターを取り上げます。

<!-- Counter.vue -->
<template>
  <div>
    <button @click="increment">{{ count }}</button>
  </div>
</template>
<script>
import { reactive, watchEffect } from 'vue'

export default {
  setup() {
    const state = reactive({
      count: 0
    })

    watchEffect(() => {
      document.title = `计数器：${state.count}`
    })

    function increment() {
      state.count++
    }

    return {
      count: state.count,
      increment
    }
  }
}
</script>

この例では、応答性の高いオブジェクトの状態を定義し、watchEffect 関数を使用してその変化を監視します。 count 属性が変更されると、watchEffect コールバック関数のコードが自動的に実行され、ブラウザーのタブ タイトルが更新されます。

ブラウザ タイトルの更新に加えて、watchEffect 関数を使用して、クラスとスタイルのバインディング、テキスト補間、その他の操作など、さらに多くのデータ バインディング操作を実装できます。これらのメソッドにより、コンポーネントの表示・非表示、スタイルの調整などを柔軟に制御することができます。

4. 概要

Vue3 では、watchEffect はデータが変更されたときに DOM を迅速に更新できる非常に実用的なツールです。 watchEffect 関数を使用する場合は、パフォーマンスとコードの品質を確保するために、この関数がリッスンするオブジェクトとコールバック関数内のコードに注意を払う必要があります。 watchEffect に加えて、Vue3 は、より応答性の高い関数と複合 API も提供しており、さまざまなニーズを満たすために組み合わせて使用​​できます。

以上がVue で watchEffect を使用して応答データを監視し、DOM を更新する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。