Vue conditional rendering – những điều cần biết

Bài viết được sự cho phép của tác giả Kiên Nguyễn

Đã làm việc với Vue hay VueJs thì không thể không biết tới conditional rendering (các điều kiện để render trên component).

Tại sao lại cần cái này?. Tất nhiên, không có sao ẩn hiện button, sao xử lý hiện ẩn notification?. Việc nắm chắc các điều kiện render trên component gần như là điều bắt buộc với những lập trình viên Front End muốn nắm chắc về Vue.

Hãy cùng KieBlog tìm hiểu qua về các điều kiện render – Vue conditional rendering nhé!

1. Thường dùng nhất v-if, v-else

1.1 V-if

V-if và V-else là hai điều kiện thường được sử dụng nhất khi nhắc tới Vue conditional rendering. Nếu không có thì không thể nhắc tới từ conditional. V-if có thể sử dụng để render một thẻ div, hoặc cả một code block

// Handle để render một text, một thẻ div
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>

// Cũng có thể sử dụng để handle một block
<h1 v-if="awesome">
<div>K</div>
<div>I</div>
<div>E</div>
<div>B</div>
<div>L</div>
<div>O</div>
<div>G</div>
</h1>
<h1 v-else>Oh no 😢</h1>

V-if cũng có thể được sử dụng đối với cả component (sử dụng với template)

// Nếu !ok cả component chứa teamplate sẽ không render
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>

1.2 V-else

Đã nhắc tới v-if tất nhiên không thể không nhắc tới v-else.

// Nếu !ok cả component chứa teamplate sẽ không render
<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>

Nếu các điều kiện render có nhiều và cần các điều kiện render chính xác. Vue cũng hỗ trợ sẵn v-else-if

Đôi khi việc sử dụng quá nhiều v-if và v-else gây ra sự rối rắm, khó chịu và khó maintainance. Nhưng v-else-if chỉ xuất hiện trên Vue từ bản 2.1.0+

// Nếu v-if và v-else không handle nổi các case
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>

2. V-show

Cũng sử dụng nhiều không kém và V-show. Để hiển thị ẩn hiện các item trên component, Vue conditional rendering hỗ trợ khá tốt điều kiện ẩn hiện.

// V-show có thể check một biến boolean hoặc các điều kiện phức tạp
<h1 v-show="ok">Hello!</h1>

Điều kiện check trong v-show luôn luôn là boolean. Biến có thể được khai báo, nhận từ props, hoặc là các điều kiện check để render trên component.

// V-show có thể check một biến boolean hoặc các điều kiện phức tạp
<h1 v-show="ok">Hello!</h1>

3. V-if và V-show

Nhắc tới Vue conditional rendering mà quên không so sánh giữa V-if và V-show thì thật là một sai lầm to lớn.

Hiểu rõ và phân biệt được V-if và V-show là cực kì quan trọng. Dễ để nhớ nhất chỉ có hai dòng khi nói về V-if và V-show như sau:

Generally speaking, v-if has higher toggle costs while v-show has higher initial render costs. So prefer v-show if you need to toggle something very often, and prefer v-if if the condition is unlikely to change at runtime.

Nói chung, V-if có chi phí thay đổi cao (làm nhiều thứ để thay đổi), V-show lại có chi phí khởi tạo ban đầu cao (xem xét sự thay đổi của giá trị). Chính vì thế, sử dụng V-show khi một giá trị nào đó thay đổi thường xuyên và sử dụng V-if khi điều kiện không thay đổi khi chạy.

Chạy ở đây không có nghĩa là trong cả application, nếu component cần load lại với thay đổi giá trị A -> sử dụng V-if (component render lại). Nếu component không reload mà giá trị B thay đổi liên tục (sử dụng V-show) để trigger sự thay đổi đó.

Việc hiểu đúng bản chất và phân biệt được V-show và V-if rất quan trọng. Sử dụng đúng tốt cho cả performance, cả review code. Lợi cả trăm bề.

4. Vue conditional rendering rất quan trọng

Rõ ràng mà nói, nắm chắc các kiến thức cơ bản luôn là điều cần thiết.

Nắm chắc các điều kiện render trên Vue (Vue conditional rendering) sẽ giúp:

• Sử dụng linh hoạt các điều kiện render.
• Tăng performance cho application.
• Xử gọn các điều kiện render rối rắm (khi bussiness phức tạp)

5. Tham khảo

• Vuejs Refactor Code – Một vài kinh nghiệm xương máu
• Vuejs life cycle – hiểu sao cho đúng
• Conditional Directives With Vue.js

Hết rồi. Cảm ơn anh em đã đọc bài. Nhớ like và share Facebook page nha!

Bài viết gốc được đăng tải tại kieblog.vn

Có thể bạn quan tâm:

• Vue 3 có gì mới? – What’s new from Vue 3?
• Unit Test – Những bước chân đầu tiên
• Singleton design pattern – tất cả những điều cần biết

Xem thêm Việc làm Developer hấp dẫn trên TopDev