Cara menggunakan pendengar watchEffect dalam Vue3

watchEffect listener

Sebenarnya saya rasa benda ni tak guna, jadi jangan guna, hahahahaha!

Cara nak letak, boleh faham fungsi jam dan watchEffect adalah sama.

watch: Paparkan sumber kebergantungan yang ditentukan, dan laksanakan fungsi panggil balik apabila sumber kebergantungan dikemas kini.
watchEffect: Kumpul sumber pergantungan secara automatik dan laksanakan semula sendiri apabila sumber pergantungan dikemas kini.

• Jika watchEffect wujud, komponen akan melaksanakan sendiri secara automatik sekali apabila ia dimulakan. Tidak perlu menyediakannya untuk melaksanakan serta-merta seperti jam tangan.

• jam tangan boleh mendapatkan nilai terkini dan nilai lama terakhir selepas setiap panggilan balik, tetapi watchEffect tidak boleh mendapatkannya.

• watchEffect tidak perlu menentukan atribut yang dipantau, ia akan mengumpulkan kebergantungan secara automatik Selagi kita menggunakan atribut responsif dalam panggilan balik, maka panggilan balik akan melaksanakan atribut ini selepas ia ditukar. . Seperti jam tangan, ia hanya boleh memantau sifat tertentu.

• juga perlu diperkenalkan semasa menggunakannya.

• Ingat, jam tangan boleh menggantikan watchEffect, tetapi watchEffect tidak boleh menggantikan jam tangan.

Ringkasan: Jangan gunakan watchEffect jika anda boleh menggunakan jam tangan.

penggunaan pendengar watchEffect

Mula-mula kita menulis pendengar watchEffect yang ringkas.

<template>
  <div>
    <h2>{{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>

Ingat bahawa watchEffect perlu diperkenalkan dahulu, jika tidak, ia akan menjadi sukar untuk digunakan Kemudian kita simpan kod di atas dan muat semula halaman untuk melihat hasil pelaksanaan.

Kami mendapati bahawa sebaik sahaja kami memuat semula halaman, konsol terus mencetak kandungan yang kami keluarkan, jadi komponen watchEffect akan dilaksanakan sebaik sahaja ia dimuatkan.

watchEffect memantau data asas

Kami melihat bahawa apabila menggunakan watchEffect, tiada parameter yang ditetapkan untuk memantau, hanya fungsi panggil balik, kerana ia secara automatik akan mengumpul dependensi, selagi kami menggunakannya dalam sifat panggilan balik Responsif, maka panggil balik ini akan dilaksanakan selepas sifat ini ditukar.

Sebagai contoh, apabila kita memantau nama.

<template>
  <div>
    <h2>{{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>

Mari cetak nilai nama dalam fungsi panggil balik.

watchEffect memantau data kompleks

Kes di atas digunakan untuk memantau data asas Bagaimana jika ia memantau objek?

Sebenarnya, ia adalah sama.

<template>
  <div>
    <h2>{{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>

Bagi kod di atas, butang menambah satu pada umur dalam objek budak lelaki setiap kali ia diklik, dan kemudian memantau nilai baharu umur

Anda boleh melihat bahawa terdapat tiada masalah langsung!

Bilakah watchEffect akan dilaksanakan

Seperti yang dinyatakan di atas, selagi kita menggunakan atribut responsif dalam panggilan balik, panggilan balik akan dilaksanakan selepas atribut ini ditukar, tidak seperti jam tangan yang hanya boleh memantau Atribut yang ditentukan.

Apakah maksudnya? Untuk memahaminya secara ringkas, jika ia digunakan dalam panggilan balik, ia akan dilaksanakan Jika ia tidak digunakan, ia tidak akan dilaksanakan.

Sama seperti kes di atas, apabila mengubah umur, kami mencetak umur dalam panggilan balik Jika umur terlibat dalam panggilan balik, ia akan dilaksanakan Jika kami tidak menggunakan umur yang diubah kali ini, kami hanya akan cetak Dalam satu perkataan, mari lihat sama ada kita boleh melaksanakan panggilan balik.

<template>
  <div>
    <h2>{{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>

Segarkan dan simpan, klik butang untuk mengubah suai nilai umur, dan lihat sama ada tiga perkataan 执行了 dicetak pada konsol.

Awak faham ayat tu? Adakah anda tahu bila ia dilaksanakan? OK.

Matikan pemantauan watchEffect

Andaikan kita mula menggunakan pemantauan watchEffect, tetapi apakah yang perlu saya lakukan jika saya tidak mahu ia memantau sekarang? Ia sebenarnya sangat mudah.

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

Bukankah kita telah mencipta pendengar watchEffect di atas? Untuk menutup, anda hanya perlu memanggilnya sekali dan ia akan ditutup.

res()  // 关闭

Lihat kod khusus di bawah.

<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>

Simpan dan klik butang untuk melihat kesannya.

Atas ialah kandungan terperinci Cara menggunakan pendengar watchEffect dalam Vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!