12 best practices với VueJS

0
0
146

Người đăng: Cao Đạt Lê

Theo Viblo Asia

Tóm Tắt

Giới thiệu

Xin chào tất cả các bạn, hôm nay mình sẽ giới thiệu với các bạn một số lưu ý khi coding vuejs.
Hy vọng bài ciết này có thể giúp cho các bạn tốt hơn khi coding vuejs
Không dài dòng nữa mình bắt đầu luôn nhé.

Bạn đang đọc: 12 best practices với VueJS

1. Luôn sử dụng :key với v-for

Vì sao cần phải sử dụng :key, vì nó sẽ giúp giữ lại các state của component.

 
 v-for
="product in products"
 / >  
 v-for
="product in products"
 : key="product.id"
/ >

2. Sử dụng kebab-case cho events

Khi viết những custom sự kiện thì tất cả chúng ta nên sử dụng kebab-case vì khi lắng nghe lại sự kiện này ở conponent cha nó cũng ở dạng kebab-case. Vì vậy tất cả chúng ta nên sử dụng cho cả 2 để thống nhất và dễ quản trị sau này .

// ProductItem.vue
this.$emit('choose-this-item'); // ProductList.vue

3. Khai báo Props với camelCase trong script và kebab-case trong template

Vì trong mỗi ngôn từ có convention khác nhau. Như trong javascript thì camelCase thường là chuẩn, còn trong HTML thì thường là kebab-case. Vì vậy tất cả chúng ta nên sù dụng chúng hài hòa và hợp lý .
Trong vuejs thì nó sẽ tự động hóa chuyển camelCasse thành kebab-case trong template, nhưng những bạn hãy chú ý quan tâm khi sử dụng nó nhé .

4. Luôn sử dụng function return cho data

 
data: { name: ' Product 1 ',
},

Vì sao lại như vậy, chính do nếu bạn dùng data là một object thì thì đó toàn bộ những component được tạo ra đều sẽ có chung 1 data vì nó reference với nhau. Dẫn đến khi biến hóa data trong 1 component nó hoàn toàn có thể đổi khác cả data của component khác .
Vậy nên tất cả chúng ta hãy dùng function return thay vì 1 object .

 
data() { return { name: ' Product 1 ', };
},

5. Không sử dụng v-if với v-for


 v-for
="product in products"
 v-if="product.price < 500"
/ >

Khi bạn sử dụng như vậy nó sẽ chạy qua tất cả phần tử trong array sau đó mới kiểm tra điều kiện trong v-if. Có nghĩa nó sẽ render hết phần tử rồi mới kiểm tra điều kiện để ẩn đi. Điều này nghe có vẻ không tốt lắm nhỉ.

Thay vì thế tất cả chúng ta hãy dùng computed

6. Nên validate dữ liệu của props ngay trong phần khai báo

Nếu như bạn thao tác trong một team lớn và không hề hiểu hết được ý của nhau thì tất cả chúng ta cần phải làm rõ nó ở trong code hơn. Khi người khác đọc sẽ hiểu ngay ý tưởng sáng tạo của mình .
Đây là 1 ví dụ về validate prop của Vue docs .

props: { status: { type: String, required: true, validator: function (value) { return [ ' syncing ', ' synced ', ' version-conflict ', 'error'
Xem thêm: Cấu trúc điều kiện và vòng lặp trong ngôn ngữ Python 
 ].indexOf(value) ! = = -1 } }
}

7. Sử dụng PascalCase hoặc kebab-case khi đặt tên cho file component

Đây không phải là một yếu tố gì quá nghiêm trọng nhưng nó cần có để thông nhất cách đặt tên file giữa những thành viên trong team .

# BAD
mycomponent.vue
myComponent.vue
Mycomponent.vue # GOOD
MyComponent.vue // Nên dùng vì đa số mọi người đều dùng kiểu này
my-component.vue

8. Nên sử dụng prefix cho các base component

Đây cũng là một yếu tố khác tương quan đến việc đặt tên file .
Các base component thường là những component độc lập và sử dụng được ở nhiều nơi trong project .
Ví dụ như những base component sau :

BaseButton.vue
BaseIcon.vue
BaseLink.vue

Và dựa vào cách đặt tên này tất cả chúng ta hoàn toàn có thể nhóm chúng lại và import global trong project để sử dụng ở bất kể đâu .

9. Đặt prefix "The" cho các component duy nhất mà có thể thấy ở bất kỳ đâu. Ví dụ:

TheHeader.vue
TheFooter.vue
TheSidebar.vue

10. Sử dụng một cách thống nhất các directive

Đa số những dev Vue đều sử dụng theo kểu shorthand vì nó gọn hơn :

-- @ thay cho v-on
-- : thay cho v-bind
-- # thay cho v-slot

11. Đừng gọi method trong `created` và `watch`

Giả sử những bạn muốn sử dụng watch, nhưng khi mới khởi tạo component thì watch không triển khai vì chưa có biến hóa nào cả, nên bạn quyết định hành động gọi method trong hook created như thế này :

 
created() { this.handleChange();
},
methods: { handleChange() {   },
},
watch: { item() { this.handleChange(); },
},

Bạn không nên sử dụng như thế này vì vue đã có property của watcher để bạn hoàn toàn có thể làm điều này một cách thuận tiện

 
methods: { handleChange() {   },
},
watch: { item: { immediate: true, handle() { this.handleChange(); } },
},

12. Không nên sử dụng các biểu thức trong template

Về trong thực tiễn thì bạn vẫn hoàn toàn có thể sử dụng nhưng công dụng chính của template là để hiển thị nên những bạn không nên đưa quá nhiều cá biểu thức vào mà hãy để nó vào phần script thay cho .

{{ products.map(({ name }) => name).join(',') }}

Hãy làm cho template đơn giản hơn:

Xem thêm: Cấu trúc điều kiện và vòng lặp trong ngôn ngữ Python

{{ allProductName }} // ...
computed: { allProductName() { return this.products.map(({ name }) => name).join(','); }
}

Tổng kết

Trên đây là 12 lưu ý có thể làm cho project vue của bạn trở nên dễ đọc, dễ maintain và có vẻ chuyên nghiệp hơn đấy nhỉ ))

Hy vọng bài viết này hoàn toàn có thể giúp ích được cho những bạn .
Chúc những bạn một ngày thao tác và học tập hiệu suất cao .

Source: https://final-blade.com
Category : Kiến thức Internet

admin

final-blade.com