Bài 11: Cách sử dụng forceUpdate trong VueJS

Mình đã cập nhật lại tất cả các bài với các thay đổi ở hiện tại ở năm 2024: Vue 3, Vite, Laravel 11x,...

Cập nhật gần nhất: 08/06/2024

Chào mừng các bạn quay trở lại với series học VueJS của mình, ở bài trước ta đã tìm hiểu về vòng đời của Vue instance, và bài này sẽ giới thiệu cho các bạn về các re-render lại DOM khi cần thiết, và các lỗi liên quan. Mình tổng hợp dựa vào những gì mình học được trong quá trình phát triển ứng dụng.

forceUpdate là gì? 🤔

forceUpdate là một phương pháp mà bạn có thể sử dụng để buộc một component Vue cập nhật lại mà không cần phải thay đổi dữ liệu hoặc trạng thái của nó. Điều này có thể hữu ích trong một số tình huống, nhưng cần được sử dụng cẩn thận.

Cách sử dụng `forceUpdate`

Trong Vue 3, bạn có thể sử dụng forceUpdate từ API toàn cục (global) của Vue. Dưới đây là một ví dụ:

<template>
  <div>
    <p>{{ message }} - {{ count }}</p>
    <button @click="updateMessage">Update Message</button>
    <button @click="updateCount">Update Count</button>
    <button @click="forceUpdateComponent">Force Update</button>
  </div>
</template>

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

const message = ref('Hello, World!');
const { proxy } = getCurrentInstance();
let count = 1

function updateMessage() {
  message.value = 'Hello, Vue 3!';
}

function updateCount() {
  count++
}

function forceUpdateComponent() {
  proxy.$forceUpdate();
}
</script>

Khi chạy lên ta có UI như sau:

Screenshot 2024-06-08 at 11.53.49 AM.png

Khi bấm Update Message thì ta thấy ngay lập tức message đã thay đổi trên màn hình. Nhưng khi bấm Update Count thì không có gì xảy ra cả.

Lí do là bởi vì ta đang khai báo count chỉ là 1 biến JS thường, nên với Vue nó không phải là reactive state, tức là Vue sẽ không theo dõi khi giá trị của count thay đổi.

Tiếp theo nếu ta bấm Force Update thì sẽ thấy là giá trị của count trên màn hình sẽ được cập nhật.

Giờ nếu ta F5 lại trình duyệt -> Update Count -> Update Message thì cũng thấy giá trị của count thay đổi trên UI, lí do là vì khi ta Update Message thì Vue sẽ tiến hành re-render bởi vì message là reactive state, và count cũng được "ăn hôi" và thay đổi theo 😂😂

Ở Vue 2 cách dùng là gọi: this.$forceUpdate() ở bất kì đâu trong component

Khi Nào Nên Dùng `forceUpdate`? ⏰

forceUpdate nên được sử dụng trong các tình huống sau:

Khi bạn cần cập nhật giao diện mà không có thay đổi dữ liệu rõ ràng.
Khi bạn tích hợp với các thư viện bên thứ ba mà không trigger reactivity của Vue.
Khi bạn thực hiện các thao tác DOM phức tạp và cần đảm bảo giao diện luôn cập nhật.

Tại Sao Nên Hạn Chế Dùng `forceUpdate`? ⚠️

Mặc dù forceUpdate có thể hữu ích trong một số tình huống, nhưng nó cũng có những hạn chế và có thể gây ra các vấn đề sau:

Hiệu suất: forceUpdate lại toàn bộ component có thể làm giảm hiệu suất, đặc biệt là khi component phức tạp.
Khó bảo trì: Sử dụng forceUpdate có thể làm cho code của bạn khó hiểu và khó bảo trì hơn. Điều này đặc biệt đúng khi nhiều developer làm việc trên cùng một dự án.
Thiếu minh bạch: forceUpdate bỏ qua hệ thống reactivity của Vue, làm mất đi tính minh bạch và dễ hiểu của ứng dụng.

Kết luận

Bài này siêu ngắn 😂

Hiểu rõ và sử dụng forceUpdate một cách cẩn thận có thể giúp bạn giải quyết một số vấn đề phức tạp trong ứng dụng Vue 3 của mình. Tuy nhiên, hãy luôn nhớ rằng việc lạm dụng forceUpdate có thể dẫn đến các vấn đề về hiệu suất và bảo trì. Luôn ưu tiên sử dụng các phương pháp reactivity tiêu chuẩn của Vue trước khi nghĩ đến forceUpdate.

Mong rằng các bạn đã hiểu được cách $forceUpdate hoạt động, qua đó sử dụng một cách đúng đắn tránh được các trường hợp không hiểu vì sao hiển thị dữ liệu không đúng, hoặc những trường hợp thôi cứ thêm vào forceUpdate cho nó chắc .

Nói chung khi code mình hạn chế sử dụng $forceUpdate, với mình đó là giải pháp tệ nhất khi không giải thích được lỗi về data. Như trang chủ Vue đã khuyến cáo:

If you find yourself needing to force an update in Vue, in 99.99% of cases, you’ve made a mistake somewhere.

Tạm dịch:
Nếu bạn thấy mình cần phải sử dụng forceUpdate, thì 99% là bạn đã phạm sai lầm ở đâu đó rồi :-D

Hôm nay viết nhiều buồn ngủ quá rồi. Hẹn gặp lại các bạn vào bài tới với cách binding class và style cho các thẻ HTML. Có gì thắc mắc các bạn comment bên dưới nhé ^^!