VueJS: Nên sử dụng v-if hay v-show để tối ưu hiệu năng?

Nên sử dụng v-if hay v-show để tối ưu hiệu năng? Một câu hỏi mình đã từng gặp trước đây của một người đi trước mình đặt ra trong một cuộc kiểm tra kiến thức về VueJS. Theo bạn thì nên sử dụng v-if hay v-show trong quá trình xây dựng một ứng dụng về Vue.

Trong VueJS: v-if  và v-show là gì?

Cả hai v-if và v-show đều là directive  và được sử dụng để kiểm soát việc hiển thị các thành phần VueJS trên giao diện người dùng. Tuy nhiên, chúng có điểm khác biệt như sau:

• v-if: Nếu điều kiện được đưa ra là false, thành phần sẽ không được tạo ra trong DOM. Nghĩa là thành phần sẽ không được hiển thị trên giao diện người dùng và tài nguyên sẽ không được sử dụng. Khi điều kiện được đưa ra là true, thành phần sẽ được tạo ra và hiển thị trên giao diện người dùng.
• v-show: Nếu điều kiện được đưa ra là false, thành phần sẽ không được hiển thị trên giao diện người dùng, nhưng nó sẽ vẫn được tạo ra trong DOM. Khi điều kiện được đưa ra là true, thành phần sẽ được hiển thị trên giao diện người dùng. Về bản chất v-show sử dụng thuộc tính css display: none để làm việc này.

Vây thì nên sử dụng v-if hay v-show để tối ưu hiệu năng?

Thực ra, câu trả đã nằm ngay trong phần định nghĩa của hai khái niệm trên.

• v-if: Sẽ thực hiện xóa DOM và tạo lại mỗi khi thay đổi điều kiện true/false. Dẫn đến phải mất hiệu suất khởi tạo lại thành phần DOM. Tuy nhiên, khi điều kiện bằng false thì sẽ ưu điểm là trình duyệt được giải phòng RAM cho phần DOM đã bị xóa.
• v-show: Ngược lại vơi v-if thì v-show chỉ ẩn bằng thuộc tính css như đã giải thích ở phía trên. Dẫn đến khi điều kiện true/false được thực thi thì không mất hiệu suất cho việc khởi tạo lại DOM vì DOM vẫn ở đó. Tuy nhiên, việc DOM vẫn ở đó sẽ ảnh hưởng tới RAM phải lưu trữ thành phần DOM.

Chính vì vậy: Đối với trường hợp điều kiện true/false hay nói cách khác là khi điều kiện thay đổi ẩn hiện phần tử xả ra thường xuyên chúng ta sử dụng v-show để giảm bớt được quá trình tạo đi tạo lại DOM và ngược lại. Nếu điều kiện này ít xảy ra, không thường xuyên thì sử dụng v-if sẽ tốt hơn vì bộ nhớ trình duyệt được giải phóng.

Đây là một kiến thức nhỏ có thể áp dụng để tăng hiệu suất ứng dụng của bạn lên. Chúc bạn thành công!