Fungsi watchEffect dalam Vue3: Biarkan anda bermain dengan responsif Vue3 dalam masa 10 minit

Fungsi watchEffect dalam Vue3: Biarkan anda bermain dengan responsif Vue3 dalam masa 10 minit

Vue3 ialah rangka kerja Vue.js yang dikeluarkan baru-baru ini Ia secara meluas dianggap sebagai evolusi terbaharu rangka kerja Vue.js. menyediakan Ia mempunyai beberapa ciri dan pengoptimuman baharu, yang paling berpandangan ke hadapan ialah sistem responsifnya yang berkuasa.

Sistem responsif Vue3 telah dipertingkatkan dalam banyak aspek, salah satu penambahbaikan penting ialah pengenalan fungsi watchEffect. Fungsi watchEffect ialah salah satu teras Vue3, yang membolehkan anda menggunakan data responsif dan memproses dengan lebih mudah. Dalam artikel ini, kami akan memperkenalkan penggunaan asas fungsi watchEffect dan cara menggunakannya untuk meningkatkan kefungsian Vue3.

Apakah fungsi watchEffect?

Fungsi watchEffect ialah sistem reaktif berdasarkan penjejakan pergantungan dalam Vue3, dan bukannya fungsi jam tangan deklaratif dalam Vue.js tradisional. Fungsi watchEffect boleh menjejak data bergantung secara automatik dan secara automatik memanggil fungsi panggil balik apabila data bergantung berubah.

Ciri-ciri fungsi watchEffect ialah: apabila data berubah, UI akan dikemas kini serta-merta; apabila data bergantung berubah, panggilan balik sebelumnya boleh dibersihkan secara automatik dan data bergantung akan dilog keluar. Ini bermakna kita boleh mencipta dan membersihkan fungsi reaktif sebaik sahaja kita memerlukannya, dan bukannya menambah kod yang tidak diperlukan kerana kita perlu membersihkan panggilan balik sebelumnya.

Bagaimana untuk menggunakan fungsi watchEffect?

Menggunakan fungsi watchEffect dalam Vue3 adalah sangat mudah, anda hanya perlu memanggilnya dalam fungsi persediaan. Berikut ialah contoh mudah untuk memberi kita pemahaman yang lebih baik tentang cara menggunakannya:

<template>
  <div>
    <h1>{{count}}</h1>
    <button @click="increment">increment</button>
  </div>
</template>

<script>
import { reactive, watchEffect } from 'vue';

export default {
  setup() {
    const state = reactive({
      count: 0,
    });

    watchEffect(() => {
      console.log(`count changed to ${state.count}`);
    });

    const increment = () => {
      state.count++;
    };

    return {
      ...state,
      increment,
    };
  },
};
</script>

Dalam contoh ini, kami menggunakan fungsi reaktif untuk mencipta keadaan objek data reaktif, dan kemudian mendaftarkan panggilan balik melalui fungsi watchEffect Fungsi, fungsi panggil balik ini akan dipanggil apabila state.count berubah.

Apabila kami menambah butang, fungsi kenaikan dicetuskan dan nilai state.count juga akan berubah. Fungsi watchEffect akan mendengar perubahan ini secara automatik dan mencetak "kiraan ditukar kepada XX" dalam konsol.

Seperti yang dinyatakan di atas, oleh kerana fungsi watchEffect bergantung pada data reaktif, fungsi tersebut akan dipanggil sebaik sahaja data reaktif menghantar perubahan.

Faedah menggunakan fungsi watchEffect

1. Tiada pendengar paparan

Menggunakan fungsi watchEffect, kita tidak perlu memanggil pendengar jam tangan secara eksplisit untuk mendengar untuk perubahan data. Sebaliknya, fungsi watchEffect secara automatik menjejak kebergantungan dan mendaftarkan fungsi dengan kebergantungan untuk memastikan ketekalan data.

2. Prestasi yang lebih baik

Memandangkan fungsi watchEffect berdasarkan penjejakan kebergantungan, ia boleh mengoptimumkan prestasi dengan lebih baik. Ia secara automatik membersihkan panggilan balik sebelumnya dan menyahdaftar data bergantung supaya kami boleh mencipta dan membersihkan fungsi reaktif sekali gus mengikut keperluan.

3. Kod yang lebih ringkas

Sistem responsif Vue3 menggunakan idea pengaturcaraan yang lebih berfungsi, begitu juga dengan fungsi watchEffect. Apabila data reaktif berubah, kita boleh menulis panggilan balik mudah untuk mengendalikannya tanpa menulis banyak kod berulang.

Ringkasan

Seperti yang dinyatakan di atas, fungsi watchEffect ialah ciri berkuasa Vue3, membolehkan pembangun menggunakan data responsif dan memproses dengan lebih mudah dan cekap. Menggunakannya secara berkesan boleh mengurangkan jumlah kod yang kami tulis dan mengoptimumkan prestasi kod kami.

Apabila anda mula menggunakan Vue3, pastikan anda belajar menggunakan dan memahami fungsi watchEffect untuk memanfaatkan sepenuhnya sistem responsif Vue3.

Atas ialah kandungan terperinci Fungsi watchEffect dalam Vue3: Biarkan anda bermain dengan responsif Vue3 dalam masa 10 minit. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!