vue3でwatchを使用する方法

#データ監視なので、監視されるのはその変化です。次に、その変更をキャプチャできる必要があるため、監視対象データは応答性の高いデータである必要があります。

watch(WatcherSource, Callback, [WatchOptions])

Parameters:
WatcherSource: Want to応答データを監視します。
Callback: 実行されるコールバック関数、入力パラメータ (newValue、oldValue)。
[WatchOptions]: deep、immediate、および flash はオプションです。

WatchOptions のパラメータ設定:

deep: オブジェクトなどの参照型データを深く監視する必要がある場合は deep: true を設定し、デフォルト値は間違い。

immediate: デフォルトでは、watch は遅延ですimmediate: true が設定されている場合、watch は初期化中にただちにコールバック関数を 1 回実行します。
flush: コールバック関数の実行タイミングを制御します。事前、事後、または同期に設定できます。
Pre: デフォルト値 監視値が変化すると、コールバック関数が最初に実行されます (DOM が更新される前に実行されます)。
後: DOM の更新とレンダリングが完了したら、コールバック関数を実行します。
sync: 監視対象の値が変更されると、コールバック関数が同期的に実行されます (慎重に使用することをお勧めします)。

1. 単一のデータ参照

const count = ref(1);
watch(count, (newValue, oldValue) => {
  console.log('值发生了变更', newValue, oldValue);
});

を監視すると、新しい値と古い値を取得できます。

2 番目、参照型データ参照の監視: ディープ監視

const count = ref({
  a: 1,
  b: 2
});
const handleClick = function () {
 count.value.a = 5;
};
watch(count, (newValue, oldValue) => {
  console.log('值发生了变更', newValue, oldValue);
});

配列全体が参照データ型として監視されても、その内部項目の 1 つの変更は監視されません。したがって、ウォッチ内のコードは実行されません。

1、参照タイプ ref 直接ディープ モニタリング

現時点では、ディープ モニタリングを使用する必要があります: deep:true

const count = ref({
  a: 1,
  b: 2
});
const handleClick = function () {
  count.value.a = 5;
};
watch(
  count,
  (newValue, oldValue) => {
    console.log('值发生了变更', newValue, oldValue);
  },
  { deep: true }
);

値が変更されました Proxy { a: 5, b: 2} プロキシ {a: 5, b: 2}

詳細なモニタリングの必要性は、属性ではなく参照データ型そのものであることに注意してください。初期化 。さらに、新しい値のみを取得できますが、古い値は取得できません。

2, 参照型 ref ディープコピー ディープモニタリング

const count = ref({
  a: 1,
  b: 2
});
const handleClick = function () {
  count.value.a = 5;
};
watch(
  () => {
    return { ...count.value };
  },
  (newValue, oldValue) => {
    console.log('值发生了变更', newValue, oldValue);
  },
  { deep: true }
);

このようにして、watch の参照型データソースのディープコピーを作成し、古いデータの取得を完了することができます。新しい値:

値が変更されました {a: 5, b: 2} {a: 1, b: 2}

3、単一データを監視します: reactive

const single = reactive({ count: 1, test: 2 });
const handleClick = function () {
  single.count++;
};
watch(
  () => single.count,
  (newValue, oldValue) => {
    console.log('值发生了变更', newValue, oldValue);
  },
  { immediate: true }
);

here 主に () => single.count です。監視されるのは single のカウントであり、この属性が変更された場合にのみコールバック関数がトリガーされます。この場合、新旧の値を取得することが可能である。

4 番目に、参照型データ: reactive

<template>
  <div class="mine-box">
    <div ref="countDom">{{ single.count }}</div>
    <button @click="handleClick">按钮</button>
  </div>
</template>

<script setup>
import { ref, reactive, watch } from &#39;vue&#39;;
const single = reactive({ count: 1, test: { a: 1, b: 2 } });
const handleClick = function () {
  single.test.a++;
};
watch(
  single,
  (newValue, oldValue) => {
    console.log(&#39;值发生了变更&#39;, newValue, oldValue);
  },
  { immediate: true }
);
</script>

reactive データを監視します。deep: true が使用されているかどうかは影響しません。単一の属性が変更された場合、それを監視できます。コールバック関数を実行します。

No.3との違いは、この場合は新しい値しか取得できないことです。

5, immediate: true

デフォルトでは、watch は遅延型です。

set

immediate: true にすると、watch は初期化中にすぐにコールバックを実行します。 。

const count = ref(1);
const handleClick = function () {
  count.value++;
};
watch(
  count,
  (newValue, oldValue) => {
    console.log('值发生了变更', newValue, oldValue);
  },
  { deep: true, immediate: true }
);

6、複数のデータソースを監視します

const count = ref(1);
const double = ref(2);
const handleClick = function () {
  count.value++;
  double.value++;
};
watch(
  [count, double],
  (newValue, oldValue) => {
    console.log('值发生了变更', newValue, oldValue);
  },
  { deep: true, immediate: true }
);

2 つの値が同時に変更された場合、監視コールバック関数は 1 回だけトリガーされ、監視は値ごとにトリガーされます変更、コールバック。

データの 1 つのセルを変更するときにコールバックをトリガーしたい場合は、2 つのデータ変更の間に nextTick を追加できます。

7、フラッシュ構成

1. デフォルトでは、DOM レンダリングが完了する前にコールバック関数が呼び出されます。

コールバック関数は、DOM 更新の実行よりも優先されます。リスニング値が変更された場合、フラッシュします。デフォルトは pre です。これは、コールバック関数に DOM 関連の操作があり、パラメータに immediate: true が設定されている場合、この時点では DOM がレンダリングされておらず、DOM を取得できないため、エラーが報告されることを意味します。

次にコードを見てみましょう:

<template>
  <div class="mine-box">
    <div ref="countDom">{{ count }}</div>
    <button @click="handleClick">按钮</button>
  </div>
</template>

<script setup>
import { ref, watch } from &#39;vue&#39;;
const count = ref(1);
const countDom = ref(null);
const handleClick = function () {
  count.value++;
};
watch(
  count,
  (newValue, oldValue) => {
    console.log(&#39;---&#39;, countDom.value.textContent);
    console.log(&#39;值发生了变更&#39;, newValue, oldValue);
  },
  { deep: true }
);
</script>

得られた結果:

--- 1 つの値が変更されました 2 1

コールバック関数では、新しい値は 2 になりましたが、取得された DOM は以前のもののままです。デフォルトでは、フラッシュ値は pre です。値が変更されると、DOM が更新される前にコールバック関数がトリガーされます。

2, フラッシュ: 'post' dom レンダリングが完了した後、コールバック関数

<template>
  <div class="mine-box">
    <div ref="countDom">{{ count }}</div>
    <button @click="handleClick">按钮</button>
  </div>
</template>

<script setup>
import { ref, watch } from &#39;vue&#39;;
const count = ref(1);
const countDom = ref(null);
const handleClick = function () {
  count.value++;
};
watch(
  count,
  (newValue, oldValue) => {
    console.log(&#39;---&#39;, countDom.value.textContent);
    console.log(&#39;值发生了变更&#39;, newValue, oldValue);
  },
  { deep: true, flush: &#39;post&#39; }
);
</script>

を実行します。得られた結果:

--- 2 の値があります。 Changed 2 1

コールバック関数を呼び出すとDOMが更新されており、このとき取得されるDOMはデータ変更後の更新後のDOMとなります。

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