Vue3でwatchEffectリスナーを使用する方法

watchEffect リスナー

実は、これは役に立たないと思うので、使用しないでください、ははははは！

なんと言うか、watchとwatchEffectの機能は同じであることが分かります。

watch: 指定した依存元を表示し、依存元が更新されたときにコールバック関数を実行します。
watchEffect: 依存関係ソースを自動的に収集し、依存関係ソースが更新されたときにそれ自体を再実行します。

• watchEffect 存在する場合、コンポーネントは初期化時に 1 回だけ自動的に実行されます。watch のように即時実行するように設定する必要はありません。

• watch 各コールバックの後、最新の値と最後の古い値を取得できますが、watchEffect はそれを取得できません。

• watchEffect は監視するプロパティを指定する必要はありません。自動的に依存関係を収集します。コールバックで応答性の高いプロパティを使用している限り、これらのプロパティが設定された後にコールバックが実行されます。いいえ watch と同様に、指定されたプロパティのみを監視できます。使用する場合は

• # も導入する必要があります。

• watch は watchEffect を置き換えることができますが、watchEffect は watch を置き換えることはできないことに注意してください。

要約: watch を使用できる場合は、watchEffect を使用しないでください。

watchEffect リスナーの使用法

最初に、単純な watchEffect リスナーを作成します。

<template>
  <div>
    <h2 id="name">{{name}}</h2>
    <button @click="btn">修改name</button>
  </div>
</template>

<script>
import { ref, watchEffect } from "vue";
export default {
  name: "App",
  setup() {
    const name = ref("我是????????.");

    function btn() {
      name.value = "????????.";
    }

    const res = watchEffect(() => {
      console.log("watchEffect 执行了");
    });

    return { name, btn };
  }
};
</script>

最初に watchEffect を導入する必要があることに注意してください。そうしないと使いにくくなります。次に、上記のコードを保存し、ページを更新して実行結果を確認します。

ページを更新するとすぐに、出力したコンテンツがコンソールに直接出力されることがわかりました。そのため、watchEffect コンポーネントはロードされるとすぐに実行されます。

watchEffect は基本データを監視します

watchEffect を使用する場合、監視するパラメータは設定されておらず、コールバック関数が 1 つだけであることがわかります。これは、これを使用する限り依存関係が自動的に収集されるためです。コールバック Responsive プロパティの場合、このコールバックはこれらのプロパティが変更された後に実行されます。

たとえば、名前を監視する場合。

<template>
  <div>
    <h2 id="name">{{name}}</h2>
    <button @click="btn">修改name</button>
  </div>
</template>

<script>
import { ref, watchEffect } from "vue";
export default {
  name: "App",
  setup() {
    const name = ref("我是????????.");

    function btn() {
      name.value = "????????.";
    }

    const res = watchEffect(() => {
      console.log(name.value);
    });

    return { name, btn };
  }
};
</script>

コールバック関数の name の値を出力します。

watchEffect 複雑なデータの監視

上記の例は基本的なデータの監視に使用されていますが、オブジェクトを監視する場合はどうなるでしょうか?

実は、同じなんです。

<template>
  <div>
    <h2 id="boy-age">{{boy.age}}</h2>
    <button @click="boy.age++">修改name</button>
  </div>
</template>

<script>
import { ref, watchEffect, reactive } from "vue";
export default {
  name: "App",
  setup() {
    const boy = reactive({
      name: "我是????????.",
      age: 10
    });

    const res = watchEffect(() => {
      console.log(boy.age);
    });

    return { boy };
  }
};
</script>

上記のコードでは、ボタンがクリックされるたびにboyオブジェクトの年齢に1を加算し、新しい年齢の値を監視します

全く問題なし！

watchEffect はいつ実行されますか?

上で述べたように、コールバックで応答性の属性を使用している限り、監視のみが可能な watch とは異なり、コールバックはこれらの属性が変更された後に実行されます。 . 指定された属性。

これはどういう意味ですか? 簡単に理解すると、コールバックで使用されていれば実行され、使用されていない場合は実行されません。

上記の場合と同様に、年齢を変更する場合、コールバックに年齢を出力します。コールバックに年齢が含まれている場合は実行されます。今回変更された年齢を使用しない場合は、のみ実行されます。 print つまり、コールバックを実行できるかどうかを見てみましょう。

<template>
  <div>
    <h2 id="boy-age">{{boy.age}}</h2>
    <button @click="boy.age++">修改name</button>
  </div>
</template>

<script>
import { ref, watchEffect, reactive } from "vue";
export default {
  name: "App",
  setup() {
    const boy = reactive({
      name: "我是????????.",
      age: 10
    });

    const res = watchEffect(() => {
      console.log("执行了");
    });

    return { boy };
  }
};
</script>

更新して保存し、ボタンをクリックして age の値を変更し、コンソールに executed という文字が出力されるかどうかを確認します。

その文わかりますか?いつ処刑されたか知っていますか？わかりました。

watchEffect モニタリングをオフにする

watchEffect モニタリングの使用を開始するとします。しかし、今はモニタリングしたくない場合はどうすればよいでしょうか?実はとてもシンプルなのです。

    const res = watchEffect(() => {
      console.log(boy.age);
    });

上で watchEffect リスナーを作成しませんでしたか?閉じるには、一度呼び出すだけで閉じられます。

res()  // 关闭

以下の具体的なコードを見てください。

<script>
import { ref, watchEffect, reactive } from "vue";
export default {
  name: "App",
  setup() {
    const boy = reactive({
      name: "我是????????.",
      age: 10
    });

    const res = watchEffect(() =&gt; {
      console.log(boy.age);
    });

    res()  // 关闭监听

    return { boy };
  }
};
</script>

保存し、ボタンをクリックして効果を確認します。

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