Ref và Reactive trong Vue 3

Trong Vue 3 có hai Reactivity API mà dễ làm newbie gây nhầm lẫn khi sử dụng đó là ref và reactive. Bài viết này mình sẽ hướng dẫn cách sử dụng 2 API trên, kèm một số so sánh với Vue 2 cho những ai mới chuyển từ Vue 2 lên Vue 3.

Ref

Ví dụ đơn giản khi thay đổi một reactive state bằng Vue 2:

Chức năng tương tự nhưng sử dụng ref() trong Vue 3:

Để hiểu rõ hơn về nguyên lý hoạt động của ref(), các bạn nên tìm hiểu thêm về Proxy trong Javascript.

Một số chú ý về ref():

• Chúng ta có thể lưu dữ liệu gì vào ref object cũng được.
• Ref object là mutable, khi cần thay đổi giá trị thì có thể thay đổi trực tiếp thuộc tính value của nó. Tuy nhiên khi dùng ref object ở template thì chúng ta không cần .value vì nó được tự động unwrap.

Reactive

Trong đa số trường hợp, chúng ta chỉ cần dùng ref() là đủ. Vậy dùng reactive() để làm gì?

reactive() hoạt động tương tự ref() nhưng nó chỉ nhận tham số là object, không nhận các kiểu dữ liệu primitives (number, string, boolean). Và chúng ta thay đổi giá trị của reactive object bằng cách thay đổi các thuộc tính của nó (thay vì thay đổi thuộc tính value như ref). Ví dụ ở trên viết lại bằng reactive():

Về bản chất ref() là một hàm wrap lại reactive (bên trong ref() sử dụng reactive()), nên trong đa số trường hợp chúng ta có thể sử dụng hầu hết ref() cho đồng bộ và đỡ phải nhớ nhiều, chỉ cần chú ý khi thay đổi giá trị của ref object phải thông qua thuộc tính value. Bạn cũng có thể dùng reactive khi muốn tạo 1 state tập trung để đỡ phải tạo nhiều biến, ví dụ:

Chú ý khi dùng reactive chúng ta chỉ được truyền vào một object và khi update thì sẽ update các thuộc tính của object đó, chứ không dùng phép gán trực tiếp vào reactive object. Ví dụ như sau là sai:

Ở dòng 20 ví dụ trên là code sai do chúng ta gán giá trị cho biến user thành một object mới. Nếu ở lúc khai báo dùng const thì sẽ báo lỗi luôn, còn nếu dùng let thì code đúng cú pháp nhưng khi bấm nút thì giao diện không update do biến user không còn là reactive object nữa, chỉ là một object bình thường. Có thể sửa lại bằng cách cập nhật từng thuộc tính một:

Hoặc sử dụng ref():

Nguồn: https://huydq.dev.