<aside> 💡 Xử lý 1 số vấn đề khi render HTML của Vue

</aside>

1. Vấn đề dùng v-if quá nhiều

VD:

<div v-if="type === 'A'">  A</div>
<div v-if="type === 'B'">  B</div>
<div v-if="type !== 'B' && type !== 'A'">  C</div>

⇒ Nếu để các điều kiện if trên html như này, code tương đối thiếu liên kết. Bên cạnh đó trên DOM Vue vẫn sẽ sinh ra 1 dòng “<! - - - >” tương ứng với 1 item không thỏa mãn điều kiện.

Nên sử dụng:

1. Dùng v-else-if và v-else

<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>

b. Khi cần if 1 khối html, nên dùng <template>

<template v-if="ok"> 
 <h1>Title</h1>  
 <p>Paragraph 1</p> 
 <p>Paragraph 2</p>
</template>

2. Dùng Div vô tội vạ

<div>
	<div v-if="type === 'A'">  A</div>
</div>

⇒ dùng div chi chít gây đọc code dài, nhiều cấp hơn và cũng vô tình bắt Dom phải render nhiều hơn

3. Render mảng

<div v-for="item in users" :key="index" v-if="index > 1">
<!-- content -->
</div>

• Lỗi 1: Đặt tên biến quá chung chung. VD: item, e,... ⇒ Đặt tên biến cẩn thận hơn
• Lỗi 2: Đặt key là index ⇒ Nếu có 2 mảng lồng nhau thì :key có thể bị trùng nhau
• Lỗi 3: Đặt v-if trên item được for ⇒ 2 directives này sẽ conflict nhau (Vue không khuyến nghị)

Các method có thể trigger render lại mảng: