Em tự học Vue đến phần này em đang hiểu là Computed nó tính toán rồi trả về giá trị. Còn Watch là nó theo dõi sự thay đổi của dữ liệu rồi update lên. Nếu vậy thì những task liên quan đến gọi api, thay đổi dữ liệu thường xuyên như update màn hình sàn chứng khoán thì mình dùng Watch hay sao vậy mọi người?
Phân biệt Computed vs Watch trong Vue
Mẹo: bạn cứ thực hành nhiều bằng cách đánh máy lại các ví dụ về 2 cái này ở những nơi (blog, sách, video clip, screencast, webinar, lớp học có thầy…) bạn tìm thấy code Vue khác nhau, cho đến một ngày đẹp trời bạn bỗng nhận ra có những cái bạn phải dùng quát mà không thể dùng cơm pú tịt.
Trong khi đó, những phép tính mang tính tĩnh, đơn giản hơn, bạn tự thấy không cần dùng tới watch làm gì vì biến chứa giá trị nằm im ở đó, không hề thay đổi suốt chương trình => watch làm gì? Bạn muốn ngồi ngắm mãi một bức tranh tĩnh vẽ đoạn code ngày này qua ngày nọ, có chán không?
Do đó, sàn chứng khoán nếu bạn lấy giá trị để lưu lại ngay lúc đó và mặc kệ nó sau 1 giây thì computed là phù hợp. Nếu định giám sát nó liên tục (giá trị thay đổi trong DOM & trong biến JS của bạn chứ không phải chỉ thay đổi ở trên web, trên API của người ta) thì dùng watch.
6 Likes
computed là nó tự tính cho bạn, còn watch thì bạn muốn thấy nó thay đổi thì nó kêu bạn, rồi bạn làm gì bạn làm
ví dụ bạn muốn c = a + b, dùng computed thì khi a hoặc b thay đổi thì c tự thay đổi theo, còn watch thì bạn theo dõi a, b, nếu thay đổi thì bạn gắn c bằng a cộng b
Thay đổi dữ liệu hiển thị trên sàng chứng khoán thì mình xem dữ liệu đó lấy từ đâu rồi tự cập nhật nó chứ đâu có liên quan gì đến computed hay watch nhỉ? Ví dụ như socketio sẽ bắn event update data cho mã nào đó mình đi call API hoặc truyền thẳng data qua socketio luôn. Còn việc render lại thì ref nó đã lo khi có thay đổi xảy ra, computed hay watch là để trích xuất hoặc side effect nếu cần.
- Sử dụng Computed:
- Sử dụng Computed khi bạn cần tính toán một giá trị dựa trên dữ liệu hiện tại trong Vue instance. Computed properties sẽ tự động cập nhật khi các dữ liệu mà chúng phụ thuộc thay đổi.
- Ví dụ, nếu bạn cần tính toán giá trị hiển thị dựa trên dữ liệu từ API như tỷ giá chứng khoán, bạn có thể sử dụng Computed để tính toán giá trị hiển thị dựa trên dữ liệu trả về từ API.
- Sử dụng Watch:
- Sử dụng Watch khi bạn cần theo dõi sự thay đổi của một dữ liệu cụ thể và thực hiện một hành động nào đó khi dữ liệu đó thay đổi.
- Ví dụ, nếu bạn cần gọi API để cập nhật dữ liệu từ màn hình sàn chứng khoán khi có sự kiện thay đổi từ người dùng, bạn có thể sử dụng Watch để theo dõi sự thay đổi của dữ liệu và thực hiện cuộc gọi API khi có sự thay đổi.
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?