Tìm hiểu về Vue.js Watchers để cải thiện việc phát triển ứng dụng web của bạn

Bài học chính

Vue là một khung JavaScript phổ biến cung cấp cho các nhà phát triển một số lợi ích chính để xây dựng các ứng dụng web. Chúng bao gồm sự hỗ trợ của nó cho kiến ​​trúc dựa trên thành phần, cho phép mã mô-đun và có thể tái sử dụng; hệ thống quản lý trạng thái mạnh mẽ, giúp duy trì tính nhất quán giữa các phần khác nhau của ứng dụng; và khả năng định tuyến tích hợp của nó, cho phép điều hướng liền mạch giữa các trang hoặc chế độ xem khác nhau trong cùng một trang web. Bằng cách tận dụng các tính năng này, các nhà phát triển có thể hợp lý hóa quy trình làm việc của họ và tạo ra các ứng dụng web hiệu quả hơn, có khả năng mở rộng hơn bằng cách sử dụng Vue.

Người theo dõi Vue đóng vai trò là người quan sát các thuộc tính phản ứng, cho phép phát hiện các thay đổi và tạo điều kiện phản hồi với các sự kiện xảy ra hoặc sửa đổi dữ liệu.

Việc sử dụng các thuộc tính được tính toán mang lại giải pháp thay thế ngắn gọn và dễ đọc hơn so với việc sử dụng trình theo dõi để đạt được chức năng tương tự, cuối cùng dẫn đến tốc độ thực thi được cải thiện và quy trình gỡ lỗi được sắp xếp hợp lý.

Các khung JavaScript đã phát triển như một yếu tố không thể thiếu trong lĩnh vực phát triển web, nhờ các thuộc tính thân thiện với người dùng như thiết kế mô-đun, bảo toàn trạng thái và quản lý điều hướng. Do đó, các thành phần không thể thiếu này góp phần đáng kể vào việc giảm bớt gánh nặng, chi phí và thời gian cần thiết để xây dựng một ứng dụng web mới.

Vue cung cấp một loạt các tính năng hỗ trợ phát triển ứng dụng nhanh chóng. Một chức năng như vậy là tính năng Watch, cho phép các nhà phát triển theo dõi những thay đổi về giá trị biến và biểu thức trong các hoạt động thời gian chạy.

Người theo dõi trong Vue là gì?

Người theo dõi Vue tạo thành các chức năng quan sát các thay đổi trong thuộc tính phản ứng và sau đó đưa ra phản hồi thích hợp theo các sửa đổi đó. Những người theo dõi này cho phép người dùng phản hồi khi xảy ra và điều chỉnh dữ liệu, cung cấp phương tiện để giám sát chu đáo trong ứng dụng.

Để sử dụng Watcher trong dự án Vue của bạn, trước tiên bạn phải nhập chức năng “watch” từ gói Vue và kết hợp nó vào tập lệnh của bạn.

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

Bằng cách sử dụng chức năng watch được cung cấp, người ta có thể kết hợp một cách hiệu quả"người theo dõi"trong thành phần Vue của họ. Một minh họa thô sơ như sau:

 <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'; // Change the user's name
};

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

Phần tử cụ thể này sử dụng chức năng Watcher để theo dõi những thay đổi trong danh tính của người dùng. Vùng đánh dấu của khối mã thiết lập khung HTML của thành phần, bao gồm một phần tử đoạn thể hiện giá trị của chất phản ứng có tên là “người dùng.

Mẫu kết hợp thành phần nút được liên kết với trình xử lý sự kiện nhấp chuột và hàm changeName . Sau khi sửa đổi dữ liệu nhập của người dùng, Vue gọi hàm gọi lại được chỉ định, sau đó hiển thị một thông báo bật lên cho biết “tên người dùng đã được cập nhật từ ‘Chinedu’ thành ‘Victor’.

So sánh người theo dõi với thuộc tính được tính toán

Điều quan trọng là phải hiểu được sự khác biệt giữa trình theo dõi và thuộc tính được tính toán khi sử dụng chúng làm cơ chế phản ứng trong khung Vue. Mặc dù cả hai đều có chức năng tương tự nhau về mặt cập nhật các ràng buộc dữ liệu dựa trên các thay đổi, nhưng điều cần thiết là phải sử dụng từng chức năng cho mục đích cụ thể của chúng.

Một minh họa cho khái niệm này có thể được tìm thấy trong cách tính tuổi kết hợp của một người cha và con trai bằng cách sử dụng đồng hồ mặt trời, 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 đã cho sử dụng trình theo dõi để có được tổng hợp tuổi của cha và con trai bằng cách tạo ra một biến phản ứng mới được gọi là “tổng”. Quá trình này được thực thi bằng Composition API do Vue cung cấp.

Mã sử ​​dụng hai chức năng đồng hồ để theo dõi tuổi của cả cha và con. Bằng cách tính tổng các độ tuổi này và cập nhật giá trị tuổi của người này với tuổi của người kia, sẽ thu được tổng số tuổi cuối cùng của các độ tuổi kết hợp. Kết quả này sau đó được lưu trữ trong

Theo cách tương tự, chúng ta hãy xem xét một ví dụ liên quan đến các thuộc tính được tính toán:javascriptconst Person={firstName:‘John’,lastName:‘Doe’,fullName() {return this.firstName +’’+ this.lastName;}};console. log(person.fullName);//Đầu ra: John Doe

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

Mã sửa đổi trình bày một cách tiếp cận ngắn gọn và hợp lý hơn để đọc tuổi của cả cha và con, đồng thời tận dụng thuộc tính được tính toán để lưu trữ số liệu tổng hợp của họ. Bằng cách sử dụng khả năng liên kết dữ liệu mạnh mẽ của Vue thông qua các phép nội suy trong phần mẫu, thông tin có thể được hiển thị liền mạch cho người dùng.

Việc sử dụng các thuộc tính được tính toán cung cấp một phương tiện hiệu quả hơn để xác định tổng của hai giá trị tuổi so với việc dựa vào người theo dõi. Việc triển khai trình theo dõi trong ngữ cảnh này có thể dẫn đến tăng thời gian tải và làm phức tạp quá trình gỡ lỗi do cơ sở mã phức tạp hơn.

Bạn nên sử dụng trình theo dõi dành riêng cho việc quan sát và phản hồi các sửa đổi trong dữ liệu thay vì sử dụng chúng thay thế cho các thuộc tính được tính toán, được thiết kế đặc biệt để lấy thông tin bổ sung từ dữ liệu phản hồi hiện tại.

Tùy chọn ngay lập tức có sẵn cho người theo dõi trong Vue

Tùy chọn “ngay lập tức”, đóng vai trò là lựa chọn thay thế trong quá trình thiết lập trình theo dõi, cho biết liệu chức năng gọi lại của trình theo dõi có được thực thi ngay lập tức sau khi gắn thành công thành phần Vue liên quan hay không.

Chắc chắn, đây là minh họa về một thành phần sử dụng chức năng theo dõi với thuộc tính “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>

Khi bắt đầu vòng đời của thành phần nói trên, người quan sát phải nhanh chóng thực thi chức năng đi kèm của nó và đăng ký “Số lượng đã thay đổi từ trạng thái không xác định thành 10” vào nhật ký hệ thống. Hành động như vậy chỉ ra rằng thực thể sơ bộ chưa được gán bất kỳ giá trị nào trước khi Vue cung cấp giá trị 10 cho tham chiếu bộ đếm.

Trong một số trường hợp nhất định, việc sử dụng tùy chọn “ngay lập tức” có thể mang lại lợi ích cho việc thực hiện thao tác ban đầu hoặc khởi tạo tùy thuộc vào trạng thái hiện tại của thuộc tính được giám sát. Như một minh họa, nếu ứng dụng của bạn cần truy xuất dữ liệu từ API ngay khi nó gắn một thành phần cụ thể.

Tùy chọn sâu có sẵn trong Vue Watchers

Tính năng theo dõi của Vue cung cấp mức độ quan sát sâu sắc về các sửa đổi trong các đối tượng hoặc mảng kèm theo, cho phép phát hiện các thay đổi xảy ra trong các thuộc tính được nhúng sâu. Khả năng này được kích hoạt bằng cách đặt tham số tương ứng thành giá trị tương đương khẳng định của nó.

Dưới đây là hình minh họa về thành phần Vue.js sử dụng tùy chọn “sâu”, cho phép hiển thị và chỉnh sửa các đối tượng lồng nhau theo cấu trúc giống cây trong trường đầu vào:

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

Đoạn mã được cung cấp khởi tạo tham chiếu data với một đối tượng sở hữu thuộc tính"độ dài". Sau đó, nó kích hoạt tùy chọn “sâu” và xác minh trong bảng điều khiển rằng dữ liệu đã được cập nhật khi giá trị của thuộc tính “độ dài” đã chuyển từ trạng thái ban đầu thành ba mươi ba (33).

Khi khởi tạo một biến dữ liệu trong Vue dưới dạng đối tượng phản ứng, nó có khả năng theo dõi các thay đổi đối với các đối tượng được lồng sâu mà không cần sử dụng tùy chọn “sâu”. Ngược lại, nếu tùy chọn “sâu” không được bật, chức năng đồng hồ sẽ không phát hiện được các sửa đổi được thực hiện đối với các đối tượng đó.

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

Mã được cung cấp bao gồm chức năng theo dõi, khi phát hiện các thay đổi đối với đối tượng phản ứng được gọi là “dữ liệu”, sẽ ghi thông báo vào bảng điều khiển cho biết rằng các sửa đổi nói trên đã xảy ra.

Xây dựng ứng dụng tốt hơn với Vue Watchers

Trình theo dõi của Vue cho phép hành vi phản ứng ở mức độ cao trong ứng dụng bằng cách cho phép quan sát các sửa đổi đối với các thuộc tính dữ liệu cụ thể, kích hoạt các hoạt động được xác định trước cùng với những thay đổi đó.

Đạt được sự hiểu biết thành thạo về các trường hợp thích hợp để thuê người theo dõi, nhận ra sự khác biệt của họ với các thuộc tính được tính toán và làm quen với các lựa chọn như ngay lập tức và sâu có thể nâng cao đáng kể khả năng của một người trong việc xây dựng các ứng dụng Vue có tính phản ứng cao.