Những điều cần biết về watcher trong Vue.js để cải thiện lập trình web

Sử dụng watcher giám sát các thay đổi và triển khai hoạt động trực quan hơn. Dưới đây là những điều bạn cần biết về watcher trong Vue.js.

Framework JavaScript đã trở thành một phần quan trọng trong phát triển web. Đó là nhờ những tính năng dễ truy cập, bao gồm kiến trúc thành phần, quản lý trạng thái và định tuyến. Chúng giúp giảm áp lực, công sức và thời gian cần để xây dựng web từ đầu.

Vue, một trong số những framework đó, cung cấp nhiều tính năng tăng tốc độ phát triển. Thuộc tính watch cho phép bạn giám sát các giá trị của biến và biểu thức trong suốt quá trình chạy chương trình.

Watcher trong Vue là gì?

Watcher Vue là các hàm giám sát thay đổi trong một thuộc tính phản ứng và phản hồi tương ứng. Watcher cho phép bạn phản ứng với các sự kiện và chỉnh sửa dữ liệu.

Để dùng watcher, nhập hàm watch từ package vue trong script:

<script setup>
import { watch } from 'vue';
</script>

Giờ bạn có thể dùng hàm watch để triển khai một watcher trong thành phần Vue. Đây là một ví dụ đơn giản:

<template>
  <div>
    <p>{{ user }}</p>
    <button @click="changeName">Change Name</button>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';

const user = ref('Chinedu');

const changeName = () => {
  user.value = 'Victor'; // Thay đổi tên của người dùng
};

watch(user, (newUser, oldUser) => {
  alert(`User name changed from "${oldUser}" to "${newUser}"`);
});
</script>

Thành phần đơn giản này dùng hàm watch để giám sát thay đổi theo tên người dùng. Phần mẫu của snipet xác định cấu trúc HTML của thành phần này, bao gồm tag p hiện giá trị của biến phản ứng từ người dùng.

Mẫu này cũng chứa một thành phần nút bấm, với hàm changeName được gắn vào trình nghe sự kiện click. Khi biến người dùng thay đổi, Vue kích hoạt hàm callback. Hàm callback hiện một thông báo: “User name đã thay đổi từ “Chinedu” sang “Victor”.

So sánh watcher với các thuộc tính được tính toán

Điều quan trọng bạn cần hiểu sự khác biệt giữa watcher và thuộc tính được tính toán - computed property. Mặc dù cả hai đều được sử dụng như những công cụ phản ứng trong Vue, bạn nên dùng chúng cho các mục đích khác nhau.

Ví dụ, bạn có thể tính tổng số tuổi của cha và con trai bằng watcher như sau:

<template>
  <input type="text" placeholder="Father's Age" v-model="father">
  <input type="text" placeholder="Son's Age" v-model="son">
  <p>Total Age: {{ total }}</p>
</template>

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

Thành phần Vue dùng watcher để tính tổng số tuổi của cha và con trai. Để làm việc này, nó tạo một biến reactive mới, total. Bạn có thể tạo một biến reactive khi dùng API thành phần của Vue.

Đoạn code này sau đó triển khai 2 hàm watch để xem tuổi con trai và bố. Đối với từng tuổi, cha hoặc con, đoạn code này tính tổng giá trị mới với tuổi của đối tượng khác. Tiếp theo, nó lưu kết quả sang biến reactive total.

Xem xét cùng bối cảnh trong đoạn code trên với dữ liệu dùng computed property:

<template>
  <input type="text" placeholder="Father's Age" v-model="father">
  <input type="text" placeholder="Son's Age" v-model="son">
  <p>Total Age: {{ total }}</p>
</template>

<script setup>
import { ref , computed } from 'vue';

const father = ref();
const son = ref();

const total = computed(() => {
  return Number(father.value) + Number(son.value);
});

</script>

Đoạn code này, so với code trước chính xác và dễ đọc hơn. Đoạn code này tính tổng tuổi của cha và con, rồi lưu nó ở computed ref, total. Phần mẫu này sau đó hiện biến tổng bằng phương pháp nội suy, kỹ thuật liên kết dữ liệu trong Vue.

Ngay cả khi bạn tính tổng tuổi của hai cha con bằng watcher, bạn vẫn nên làm việc này với các computed property. Dùng watcher trong tình huống này có thể làm chậm thời gian tải và khó gỡ lỗi hơn vì nó liên quan tới nhiều code hơn.

Những lựa chọn ngay lập tức sẵn có cho watcher trong Vue

Tùy chọn immediate là một cấu hình mà bạn có thể dùng khi tạo watcher. Lựa chọn này quyết định xem watcher có kích hoạt callback của nó ngay lập tức hay không sau khi Vue đã gắn vào thành phần này.

Đây là một ví dụ về thành phần dùng watcher với lựa chọn ngay lập tức:

<script setup>
import { ref, watch } from 'vue';

const count = ref(10);

watch(
  count,
  (newCount, oldCount) => {
    console.log(`Count changed from ${oldCount} to ${newCount}`);
  },
  { immediate: true }
);
</script>

Trong đoạn code trên, watcher sẽ chạy callback của nó ngay lập tức sau khi khởi tạo thành phần và ghi “Count changed from undefined to 10” vào console. Điều này cho thấy biến ban đầu chưa được xác định trước khi Vue chèn giá trị 10 vào ref count.

Tùy chọn ngay lập tức này có thể hữu ích trong các trường hợp mà bạn muốn triển khai một hành động ban đầu hoặc khởi tạo dựa trên giá trị hiện tại của thuộc tính được xem. Ví dụ, khi cần app tìm nạp dữ liệu từ API sau khi Vue gắn kết một thành phần.

Lựa chọn deep sẵn có trong watcher Vue

Lựa chọn deep sẵn có khi làm việc với watcher trong Vue cho phép quan sát sâu các thay đổi trong những đối tượng lồng nhau hay mảng. Khi đặt sang true, watcher có thể phát hiện các thay đổi trong thuộc tính lồng nhau.

Đây là ví dụ của một thành phần Vue với tùy chọn deep:

<script setup>
import { ref, watch } from 'vue';

const data = ref({ length: 42 });

watch(
  data,
  (newData, oldData) => {
    console.log(`Data changed"`);
  },
  { deep: true }
);

// Hành động này sẽ kích hoạt watcher vì nó là thay đổi sâu
data.value.length = 43;
</script>

Đoạn code trên khởi tạo ref với một đối tượng chứa thuộc tính length. Đoạn code này đặt tùy chọn deep sang true. Sau đó, nó sẽ ghi vào console chứa dữ liệu đã thay đổi do thuộc tính độ dài đã đổi sang 43.

Nếu không đặt tùy chọn deep sang true, hàm watch sẽ không nhận bất kỳ thay đổi cho đối tượng đó. Tuy nhiên, Vue theo dõi toàn bộ thay đổi deep được lồng vào mà không cần tới tùy chọn deep khi bạn khởi tạo biến dữ liệu là một đối tượng phản hồi:

<script setup>
import { ref, watch } from 'vue';

const data = reactive({ length: 42 });

watch(
  data,
  (newData, oldData) => {
    console.log(`Data changed"`);
  }
);

// Code này kích hoạt watcher vì nó thay đổi một đối tượng reactive 
data.length = 43;
</script>

Hàm watch trong đoạn code trên sẽ ghi vào console có dữ liệu thay đổi vì biến dữ liệu là một đối tượng phản hồi.

Tóm lại, watcher của Vue có thể giúp bạn đạt được phản hồi tốt cho ứng dụng. Chúng kiểm soát cách bạn quan sát các thay đổi trong thuộc tính dữ liệu và chạy logic tùy biến tương ứng.

Hiểu khi nào dùng watcher, sự khác biệt của các computed property và những tùy chọn như immediate và deep có thể nâng cao đáng kể khả năng xây dựng app Vue đáp ứng của bạn.