Pelajari Tentang Vue.js Watchers untuk Meningkatkan Pengembangan Aplikasi Web Anda

Poin Penting

• Kerangka kerja JavaScript seperti Vue menawarkan fitur seperti arsitektur komponen, manajemen status, dan perutean untuk menyederhanakan pengembangan aplikasi web.
• Pengamat Vue adalah fungsi yang memantau perubahan properti reaktif dan memungkinkan Anda bereaksi terhadap peristiwa dan modifikasi data.
• Membandingkan pengamat dengan properti yang dihitung, properti yang dihitung lebih ringkas dan mudah dibaca, sehingga menghasilkan kinerja dan proses debug yang lebih baik.

Kerangka kerja JavaScript telah menjadi bagian penting dari pengembangan web. Hal ini disebabkan fitur-fiturnya yang mudah diakses, termasuk arsitektur komponen, manajemen status, dan perutean. Ini membantu mengurangi stres, tenaga, dan waktu yang dibutuhkan untuk membangun aplikasi web dari awal.

Vue, salah satu framework ini, menawarkan banyak fitur untuk mempercepat pengembangan. Fitur jam tangan memungkinkan Anda memantau nilai variabel dan ekspresi selama eksekusi program.

Apa Itu Pengamat di Vue?

Pengamat Vue adalah fungsi yang memantau perubahan pada properti reaktif dan memberikan respons yang sesuai. Pengamat memungkinkan Anda bereaksi terhadap peristiwa dan modifikasi data.

Untuk menggunakan pengamat, impor jam tangan fungsi dari vue paket dalam skrip Anda:

<scriptsetup>
import { watch } from 'vue';
script>

Anda sekarang dapat menggunakan fungsi watch untuk mengimplementasikan watcher di komponen Vue Anda. Berikut ini contoh sederhananya:

<template>
<div>
<p>{{ user }}p>
<button @click="changeName">Change Namebutton>
div>
template>
<scriptsetup>
import { ref, watch } from 'vue';
const user = ref('Chinedu');
const changeName = () => {
 user.value = 'Victor'; // Change the user's name
};
watch(user, (newUser, oldUser) => {
 alert(`User name changed from "${oldUser}" to "${newUser}"`);
});
script>

Komponen sederhana ini menggunakan fungsi jam tangan untuk memantau perubahan nama pengguna. Bagian templat cuplikan mendefinisikan struktur HTML komponen, yang mencakup a P tag yang menampilkan nilai variabel reaktif pengguna.

Templat juga berisi elemen tombol, dengan a ganti Nama fungsi dilampirkan ke pendengar acara klik. Ketika variabel pengguna berubah, Vue memicu fungsi panggilan balik. Fungsi panggilan balik menampilkan peringatan: “Nama pengguna diubah dari "Chinedu" menjadi "Victor".”

Membandingkan Pengamat Dengan Properti yang Dihitung

Penting untuk memahami perbedaan antara pengamat dan properti yang dihitung. Meskipun keduanya digunakan sebagai alat reaktivitas di Vue, Anda harus menggunakannya untuk tujuan yang berbeda.

Misalnya, Anda dapat menghitung jumlah usia ayah dan anak dengan menggunakan pengamat, seperti ini:

<template>
<inputtype="text"placeholder="Father's Age"v-model="father">
<inputtype="text"placeholder="Son's Age"v-model="son">
<p>Total Age: {{ total }}p>
template>
<scriptsetup>
import { ref, watch } from 'vue';
const father = ref();
const son = ref();
const total = ref();
watch(son, (newAge, oldAge) => {
 total.value = Number(father.value) + Number(newAge)
})
watch(father, (newAge, oldAge) => {
 total.value = Number(newAge) + Number(son.value)
})
script>

Komponen Vue ini menggunakan pengamat untuk mendapatkan jumlah usia ayah dan anak. Untuk melakukannya, ia membuat variabel reaktif baru, total. Anda dapat membuat variabel reaktif saat Anda menggunakan Composition API Vue.

Cuplikan tersebut kemudian menggunakan dua jam tangan berfungsi untuk melihat usia anak dan ayah. Untuk setiap umur, baik ayah atau anak, cuplikan tersebut merangkum nilai baru dengan umur yang lain. Kemudian menyimpan hasilnya ke total variabel reaktif.

Pertimbangkan skenario yang sama dalam cuplikan di atas dengan skenario yang menggunakan properti terhitung:

<template>
<inputtype="text"placeholder="Father's Age"v-model="father">
<inputtype="text"placeholder="Son's Age"v-model="son">
<p>Total Age: {{ total }}p>
template>
<scriptsetup>
import { ref, computed } from 'vue';
const father = ref();
const son = ref();
const total = computed(() => {
 return Number(father.value) + Number(son.value);
});
script>

Cuplikan ini, dibandingkan cuplikan sebelumnya, lebih ringkas dan mudah dibaca. Cuplikan tersebut mendapatkan jumlah usia ayah dan anak dan menyimpannya dalam referensi yang dihitung (variabel), total. Bagian template kemudian menampilkan total variabel yang digunakan interpolasi, teknik pengikatan data di Vue.

Bahkan jika Anda bisa mendapatkan total kedua usia dengan pengamat, lebih baik melakukannya dengan properti yang dihitung. Menggunakan pengamat dalam situasi ini dapat menyebabkan waktu pemuatan lebih lambat dan proses debug lebih sulit hanya karena melibatkan lebih banyak kode.

Jangan gunakan pengamat sebagai pengganti properti yang dihitung. Gunakan pengamat untuk memantau dan bereaksi terhadap perubahan data, dan menghitung properti saat Anda ingin memperoleh data baru dari data reaktif yang ada.

Itu segera opsi adalah konfigurasi yang dapat Anda gunakan saat membuat pengamat. Opsi ini menentukan apakah watcher harus memicu callbacknya segera setelah Vue memasang komponen.

Berikut ini contoh komponen yang menggunakan watcher dengan opsi langsung:

<scriptsetup>
import { ref, watch } from 'vue';
const count = ref(10);
watch(
 count,
 (newCount, oldCount) => {
 console.log(`Count changed from ${oldCount} to ${newCount}`);
 },
 { immediate: true }
);
script>

Dalam cuplikan di atas, pengamat akan menjalankan panggilan baliknya segera setelah inisialisasi komponen dan mencatat “Jumlah diubah dari tidak terdefinisi menjadi 10” ke konsol. Hal ini menunjukkan bahwa variabel awal tidak terdefinisi sebelum Vue memasukkan nilai 10 ke ref hitungan.

Opsi langsung dapat berguna dalam skenario ketika Anda ingin melakukan tindakan awal atau inisialisasi berdasarkan nilai properti yang diawasi saat ini. Misalnya, ketika Anda memerlukan aplikasi untuk mengambil data dari API setelah Vue memasang komponen.

Opsi Mendalam Tersedia di Vue Watchers

Itu dalam Opsi yang tersedia saat bekerja dengan pengamat di Vue memungkinkan pengamatan mendalam terhadap perubahan dalam objek atau array yang disarangkan. Saat diatur ke BENAR, pengamat dapat mendeteksi perubahan dalam properti bertingkat.

Berikut ini contoh komponen Vue dengan opsi deep:

<scriptsetup>
import { ref, watch } from 'vue';
const data = ref({ length: 42 });
watch(
 data,
 (newData, oldData) => {
 console.log(`Data changed"`);
 },
 { deep: true }
);
// This will trigger the watcher because it's a deep change
data.value.length = 43;
script>

Cuplikan di atas menginisialisasi data ref dengan objek yang mengandung a panjang Properti. Cuplikan menyetel opsi mendalam ke BENAR. Kemudian log ke konsol yang datanya telah berubah sejak properti length diubah 43.

Tanpa opsi dalam yang disetel ke true, fungsi jam tangan tidak akan melihat perubahan apa pun pada objek. Namun, Vue melacak semua perubahan bertingkat dan mendalam tanpa opsi mendalam ketika Anda menginisialisasi variabel data sebagai objek reaktif:

<scriptsetup>
import { ref, watch } from 'vue';
const data = reactive({ length: 42 });
watch(
 data,
 (newData, oldData) => {
 console.log(`Data changed"`);
 }
);
// This will trigger the watcher because it changes a reactive object
data.length = 43;
script>

Fungsi jam tangan pada cuplikan di atas akan mencatat ke konsol bahwa datanya berubah karena variabel data adalah objek reaktif.

Bangun Aplikasi yang Lebih Baik Dengan Vue Watchers

Pengamat Vue dapat membantu Anda mencapai reaktivitas yang lebih baik dalam aplikasi Anda. Mereka mengontrol bagaimana Anda dapat mengamati perubahan pada properti data dan menjalankan logika kustom sebagai respons.

Memahami kapan harus menggunakan pengamat, perbedaannya dari properti yang dihitung, dan opsi seperti segera dan mendalam dapat secara signifikan meningkatkan kemampuan Anda untuk membangun aplikasi Vue yang sangat responsif.