Bài viết này sẽ giới thiệu cho bạn 10 mẹo hay nên làm theo nếu bạn đang xử lý một dự án Vue có cơ sở code lớn.

1. Slots

Khi dự án phát triển theo thời gian, bạn cần hiển thị nhiều thứ mới khác: các trường biểu mẫu, các nút khác nhau tùy thuộc vào trang mà nó được hiển thị, thẻ, chân trang (footer)... Nếu bạn tiếp tục sử dụng các đạo cụ (prop) để làm cho thành phần này phát triển, vẫn sẽ ổn, cho tới khi các thành phần (component) nhanh chóng trở nên quá phức tạp. Nó bao gồm vô số thành phần con, sử dụng quá nhiều đạo cụ, tạo ra một số lượng lớn các sự kiện. 

Sẽ tốt hơn nếu bạn áp dụng Slots vào ngay từ đầu, nó sẽ giúp cấu trúc lại mọi thứ để tạo ra thành phần nhỏ dễ bảo trì hơn, hiểu nhanh hơn và dễ mở rộng hơn, cùng xem mẫu code ở dưới:

HTML

Biết cách sử dụng Slots sẽ tạo ra sự khác biệt lớn về khả năng bảo trì trong tương lai của các dự án. Ít xuất hiện sự kiện (event) hơn, code dễ hiểu hơn, linh hoạt hơn vì bạn có thể hiển thị bất kỳ thành phần nào bạn muốn ở bên trong.

Thông thường, khi kết thúc việc sao chép đạo cụ của các thành phần con bên trong thành phần mẹ, bạn nên bắt đầu sử dụng Slots tại thời điểm đó.

2. Tổ chức Vuex Store của bạn đúng cách

Thông thường, lí do các lập trình viên Vue.js tiến tới việc tìm hiểu hiểu về Vuex là do họ tình cờ gặp phải hai vấn đề sau:

  • Cần truy cập dữ liệu từ một thành phần khác, ở quá xa thành phần hiện tại.
  • Cần giữ lại dữ liệu sau khi thành phần bị phá hủy.

Khi bắt đầu tạo Vuex Store, chúng ta bắt đầu học được khái niệm module và cách sử dụng trong ứng dụng.

Không một quy chuẩn nào để tổ chức module, đồng nghĩa là mỗi người mỗi ý, đa phần các lập trình viên sẽ tổ chức theo dạng tính năng

Auth

Blog

Inbox

Setting

Một cách tiếp cận hợp lý khác đó là là tổ chức theo dữ liệu trả về từ API

User

Team

Message

Widget

Article

Bạn chọn cách nào cũng được, nhưng chúng ta phải thống nhất một cách tổ chức Vuex Store để có thể làm việc hiệu quả lâu dài. Người mới vào nhóm cũng dễ tập trung vô cơ sở code hơn.

3. Sử dụng các Action để gọi API và gửi dữ liệu

Tại sao hầu hết các lệnh gọi API đều được thực hiện bên trong các action Vuex?

Vì hầu hết các dữ liệu lấy về sẽ được đưa vào trong store. Mặc khác, xét trên khía cạnh đóng gói và tái sử dụng thì đây là cách mang lại sự dễ chịu khi sử dụng nhất. 

Dữ liệu sẽ được tìm nạp, cam kết và trả về không có code trùng lặp nào ngoài lệnh gọi điều phối (dispatcher call).

4. Đơn giản hóa cơ sở code của với mapState, mapGetters, mapMutations và mapActions

Không cần phải tạo nhiều thuộc tính hoặc phương thức tính toán khi bạn chỉ cần truy cập state/getters hoặc gọi actions/mutations bên trong các thành phần.

Sử dụng mapState, mapGetters, mapMutations và mapActions có thể giúp bạn rút ngắn code, dễ hiểu hơn khi nhóm mọi thứ từ store module vào một chỗ.

5. Sử dụng các nhà máy API (API Factories)

Tạo một hàm this.$api để có thể gọi ở bất kỳ đâu khi cần tạo network request. Trong thư mục gốc, thêm một thư mục tên api chứa tất cả các phương thức liên quan 

Mỗi cái nhóm tất cả các điểm cuối cho danh mục của nó. Đây là cách khởi tạo mẫu này bằng một plugin trong các ứng dụng Nuxt (khá giống trong một ứng dụng Vue tiêu chuẩn).

Giờ chỉ cần đơn giản gọi chúng trong thành phần hoặc Vuex như:

6. Sử dụng \$config để truy cập các biến môi trường 

Dự án của bạn có thể có một số biến cấu hình chung được xác định trong một số tệp:

Tiện lợi khi truy cập chúng thông qua trình trợ giúp this.$Config

7. Tuân theo một nguyên ước duy nhất để đặt tên cho các commit:

Nếu ai thường đóng góp cho các dự án trên Github, sẽ thấy lợi ích của việc có một chuẩn chung khi viết diễn giải cho commit. Có thể tham khảo hướng dẫn viết commit của Angular

8. Luôn đóng băng các phiên bản gói (Package Version) khi dự án của bạn đang trong sản xuất (Production)

Không phải package nào cũng được đặt version theo quy tắc đã chuẩn hóa. Để tránh nửa đêm bị gọi dậy vì một trong các package đã cài bộ source bỗng dưng không tương thích, production không còn chạy như trên local.

Hãy xóa hết tiền tố ^ khi lên production:

9. Sử dụng Vue Virtual Scroller khi hiển thị nhiều dữ liệu

Khi bạn cần hiển thị nhiều hàng trong một trang nhất định hoặc cần lặp lại một lượng lớn dữ liệu, trang sẽ dần hiển thị chậm. Hãy sử dụng Vue-Virtual-Scoller để khắc phục chuyện này:

Nó sẽ chỉ render các dữ liệu có thể vừa vặn trong viewport, phần dữ liệu chưa hiển thị trên viewport sẽ được render lười (lazy render) khi cuộn tới, tăng tốc độ đáng kể:

10. Theo dõi kích cỡ của các gói bên thứ ba (Third-party Packages)

Bộ source lớn thường đồng nghĩa với việc sử dụng nhiều package lấy được trên mạng, nếu không để ý, việc cài đặt bừa bãi các package này dễ dẫn đến việc dung lượng tăng vọt. Visual Studio Code có công cụ để kiểm tra dung lượng import hoặc chạy công cụ Webpack Bundle Analyzer sẽ giúp khắc phục điều này.

 

Tổng hợp việc làm IT - Software trên VietnamWorks
VietnamWorks InTECH
Theo freecodecamp