Vueでのwatchの使い方

Vue の Watch は、データ属性値の変更を監視し、コールバック関数を実行するために使用されるリアクティブ関数です。基本的な使用法は watch(property, handler) です。property は監視するプロパティまたはプロパティ配列、handler はコールバック関数です。また、immediate (即時呼び出し) や deep (ディープ リスニング) などのオプション オブジェクトを構成することもできます。 watch は、UI の更新やデータの非同期ロードなど、データ プロパティ値の変更に対応する必要がある状況に適しています。

Vue での watch の使用

watch とは

watch は、データ プロパティ値の変更を監視し、コールバック関数を実行できる Vue のリアクティブ関数です。監視対象のプロパティが変更されると、コールバック関数が呼び出され、必要な更新や操作を実行できます。

構文

<code class="js">watch(property, handler)</code>

• property: 監視するプロパティまたはプロパティの配列。
• handler: プロパティ値が変更されたときに呼び出されるコールバック関数。新しい値と古い値をパラメータとして受け取ります。

基本的な使用法

プロパティを監視するには、プロパティ名とコールバック関数を渡すだけです:

<code class="js">watch('count', (newValue, oldValue) => {
  // count 的新值是 newValue，旧值是 oldValue
})</code>

Monitor複数のプロパティ

複数のプロパティを一度に監視するには、プロパティの配列を渡すことができます:

<code class="js">watch(['count', 'name'], (newValue, oldValue) => {
  // 监视的值在 newValue 中作为对象提供，键为属性名
})</code>

Options オブジェクト

使用できます。監視動作を構成するためのオプション オブジェクト:

<code class="js">watch({
  count: {
    handler(newValue, oldValue) {
      // ...
    },
    immediate: true,
    deep: true
  }
})</code>

• immediate: true の場合、監視対象のプロパティが初期化されるとすぐにコールバック関数が呼び出されます。
• deep: true の場合、watch は参照の変更だけでなく、オブジェクトと配列の深さの変更を監視します。

高度な使用方法

特定の属性パスをリッスンする

ドット表記を使用してオブジェクト属性パスの変更を監視する:

<code class="js">watch('user.name', (newValue, oldValue) => {
  // ...
})</code>

戻り値を使用します

watch コールバック関数は、unwatch 関数を含む関数または Promise を返すことができます:

• 関数: この関数は、コンポーネントが破棄されるときに呼び出されます。この関数を使用して、リソースをクリアしたり、イベントのサブスクライブを解除したりできます。
• Promise: Promise が解決されると、監視は解除されます。

#watch を使用する場合

watch は、次のようなデータ属性値の変更に対応する必要がある状況に適しています。

#UI の更新

他の計算プロパティまたはメソッドのトリガー
• データの非同期ロード
• フォーム検証
• 代替案

場合によっては、計算されたプロパティが監視の代替となる場合があります。ただし、計算されたプロパティは派生します。つまり、その値は他の反応性プロパティから計算されます。

以上がVueでのwatchの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。