Vueでのwatchの使い方

Vue.js の Watch を使用すると、データ プロパティの変更をリッスンし、操作を実行できます。構文は次のとおりです: watch(式, コールバック, オプション)。データ属性を監視するための文字列または関数の使用をサポートし、変更時にコールバック関数を呼び出すかどうか、詳細に監視するかどうか、およびオプションを使用して同期的に更新するかどうかを設定できます。

Vue.js での watch の使用

Vue.js での Watch は、次のことができるリアクティブ API です。データ プロパティの変更をリッスンし、それらの変更に基づいてアクションを実行します。

#構文

<code class="js">watch(expression, callback, options)</code>

パラメータ

• expression: 監視するデータ属性。文字列 (プロパティ名) または関数 (監視する値を返す) を使用できます。
• callback: データ属性が変更されたときに呼び出される関数。新しい値と古い値の 2 つのパラメータを受け取ります。
• options (オプション): 監視の構成に使用されるオプションのオブジェクト。

#例

<code class="js">// 使用字符串
watch('message', function (newValue, oldValue) {
  console.log(`Message changed from "${oldValue}" to "${newValue}".`);
});

// 使用函数
watch(function () {
  return this.count;
}, function (newValue, oldValue) {
  console.log(`Count incremented from ${oldValue} to ${newValue}.`);
});</code>

オプション

immediate
• : 監視するかどうかを制御しますコールバック関数は、コンポーネントが初期化されるとすぐに呼び出されます。デフォルト値は false です。
deep
• : 監視がオブジェクトと配列の変更を詳細に監視するかどうかを制御します。デフォルト値は false です。
sync
• : データ属性が変更された直後にウォッチがコールバック関数を呼び出すかどうかを制御します。デフォルト値は false です。

使用シナリオ

監視を使用する一般的なシナリオは次のとおりです。

データ属性が変更された場合の DOM の更新

• データ属性が変更されたときに外部アクション (リクエストの作成など) をトリガーする
• 他のコンポーネントからのイベントに応答する

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