Những quy tắc trong VueJS

Xin chào các bạn, hôm nay mình sẽ chia sẻ những quy tắc khi code VueJs giúp chúng ta ngăn ngừa lỗi trong quá trình code.

I. Essential (Thiết yếu)

1. Sử dụng tên component nhiều từ

• Tên component phải luôn có nhiều từ, ngoại trừ các component root như App. Điều này ngăn xung đột với các phần tử HTML hiện tại và tương lai, vì tất cả các phần tử HTML là một từ duy nhất.

• Bad:

// <!-- in pre-compiled templates -->
<Item /> // <!-- in in-DOM templates -->
<item></item>

• Good:

// <!-- in pre-compiled templates -->
<TodoItem /> // <!-- in in-DOM templates -->
<todo-item></todo-item>

2. Sử dụng DefineProps

• Trong defineProps chúng ta nên chỉ định các loại dữ liệu càng chi tiết càng tốt.

• Có 2 lợi ích chính:

  • Chúng ghi lại các props của component, để dễ dàng biết được component đó được sử dụng như thế nào.
  • Trong quá trình code, Vue sẽ cảnh báo nếu một component được cung cấp các props có định dạng không chính xác, giúp chúng ta phát hiện các lỗi tiềm ẩn.

• Bad

// This is only OK when prototyping
const props = defineProps(['status'])

• Good

const props = defineProps({ status: String
})

or

// Even better! const props = defineProps({ status: { type: String, required: true, validator: (value) => { return ['syncing', 'synced', 'version-conflict', 'error'].includes( value ) } }
}) 

3. Sử dụng Key trong v-for

• key trong v-for là một thuộc tính dùng để định danh duy nhất cho mỗi phần tử khi lặp qua một mảng hoặc một đối tượng. Key giúp Vue xác định và quản lý sự thay đổi của các phần tử trong danh sách khi dữ liệu thay đổi.

• Khi sử dụng v-for để lặp qua một mảng, bạn nên cung cấp thuộc tính key để đảm bảo hiệu suất tốt hơn khi thay đổi dữ liệu. Key giúp Vue nhận biết xem các phần tử đã thêm, xóa, hoặc di chuyển trong danh sách.

• Bad

<ul> <li v-for="todo in todos"> {{ todo.text }} </li>
</ul>

• Good

<ul> <li v-for="todo in todos" :key="todo.id" > {{ todo.text }} </li>
</ul>

4. Tránh v-if with v-for

• Không bao giờ sử dụng v-if trên cùng một phần tử với v-for

Hiệu năng:

• Khi sử dụng v-if cùng v-for, Vue.js phải xử lý cả hai cấu trúc điều kiện và vòng lặp đồng thời. Điều này có thể làm tăng tải hiệu năng của ứng dụng, đặc biệt khi có nhiều phần tử được lặp lại trong vòng lặp v-for.

Thứ tự ưu tiên:

• Khi bạn kết hợp v-if và v-for trên cùng một phần tử, v-if sẽ có ưu tiên cao hơn so với v-for. Điều này có nghĩa là điều kiện của v-if sẽ được kiểm tra trước khi vòng lặp v-for được thực hiện. Điều này có thể làm cho các lặp không cần thiết hoặc không được thực hiện theo ý muốn.

Bad

<ul> <li v-for="user in users" v-if="user.isActive" :key="user.id" > {{ user.name }} </li>
</ul>

Good

<ul> <template v-for="user in users" :key="user.id"> <li v-if="user.isActive"> {{ user.name }} </li> </template>
</ul>

II. Kết thúc

• Đây là những quy tắc mình tổng hợp trong phần này, mình sẽ tiếp tục tổng hợp thêm cho các phần tiếp theo nhé.!!! Byeeeee