Làm thế nào để tối ưu hóa hiệu năng render khi làm việc với danh sách dữ liệu cực lớn (Virtual Scrolling) trong Vue 3.5?

Question

Accepted Answer

Khi danh sách lên đến hàng chục nghìn phần tử, việc render toàn bộ DOM sẽ gây treo trình duyệt.
Chiến lược tối ưu:

Virtual Scrolling: Chỉ render các phần tử nằm trong viewport (sử dụng thư viện như vue-virtual-scroller).
ShallowRef: Sử dụng shallowRef cho danh sách dữ liệu để tránh Vue tạo Proxy cho từng phần tử con, giúp giảm đáng kể thời gian khởi tạo.
v-once: Sử dụng directive v-once cho các phần tử tĩnh trong danh sách để bỏ qua việc cập nhật lại DOM khi state thay đổi.

Kinh nghiệm:
Luôn ưu tiên xử lý dữ liệu ở tầng logic (JavaScript) trước khi đưa vào template.

Làm thế nào để tối ưu hóa hiệu năng render khi làm việc với danh sách dữ liệu cực lớn (Virtual Scrolling) trong Vue 3.5?

Khóa học Vue 3 Masterclass

Tải Tuyển Tập 100+ Câu Hỏi Phỏng Vấn Chuyên Sâu (PDF)

Cần Mentor Phỏng Vấn Thử 1-1 & Tối Ưu CV?

Kiểm Tra CV Chuẩn ATS Miễn Phí

Câu hỏi Vue.js liên quan cùng chủ đề