Từ một thư viện javascript đến một framework, hành trình của Vue thật ấn tượng, đặc biệt khi bạn xem xét cách nó vẫn duy trì bản chất nhẹ của nó. Có một số tính năng mà Vue3 cung cấp, bao gồm Pinia, cho phép quản lý trạng thái dễ dàng hơn, cũng như chuỗi công cụ xây dựng hoạt động trên Vite. Cho dù bạn muốn cập nhật ứng dụng của mình lên Vue3 hay chỉ muốn thử nghiệm với khung này, chúng tôi đã tổng hợp mọi thứ bạn cần biết về Vue3 tại đây!
Vue3 là gì?
Trước khi chúng ta đi sâu vào những thay đổi mà bạn sẽ thấy trong Vue3, trước tiên chúng ta hãy xem Vue.js và các thành phần cốt lõi của nó là gì:
Vue
Vue.js là một khung JavaScript giao diện người dùng mã nguồn mở có thể được sử dụng để tạo giao diện người dùng. Khung này cung cấp một cách tiếp cận mã hóa dựa trên thành phần và khai báo, hỗ trợ sự phát triển nhanh chóng của màn hình người dùng. Nó có thể được sử dụng để phát triển các giao diện cơ bản hoặc phức tạp và được xây dựng dựa trên HTML, CSS và JavaScript tiêu chuẩn công nghiệp. Lý do cho sự phổ biến của Vue.js và cơ sở người dùng lớn của Vue.js là cú pháp thân thiện với lập trình viên, tính dễ sử dụng và tài liệu được xác định rõ ràng.
Như đã đề cập ở trên, Vue.js được xây dựng dựa trên hai đặc điểm cốt lõi:
Kết xuất khai báo cho phép người dùng xác định đầu ra HTML theo cách khai báo tùy thuộc vào trạng thái JavaScript. Vue.js mở rộng trên HTML thông thường với sự trợ giúp của cú pháp mẫu.
Khả năng phản ứng - Vue.js chủ động giám sát trạng thái JavaScript và khi nó được sửa đổi, nó sẽ nhanh chóng làm mới DOM.
Vue3.0
Các kỹ sư đang sử dụng Vue 2 để viết mã hiện cần cập nhật lên Vue3. Điều này là do nó có các khả năng mới giúp thiết kế các thành phần nhất quán, dễ đọc và dễ dàng hơn nhiều để tổ chức các ứng dụng của chúng ta. Vue3 thân thiện với người dùng hơn, ngắn hơn và dễ bảo trì hơn. Một số tính năng đáng chú ý của Vue3 là Dịch chuyển tức thời, Mảnh vỡ và nhiều mô hình v.
Phiên bản mới nhất cũng đã loại bỏ các bộ lọc và có các biến CSS do nhà nước điều khiển cũng như tính năng hồi hộp thử nghiệm. Nó cũng có các sửa đổi đặt tên vòng đời và các thay đổi thành phần tệp đơn lẻ.
Vue3 đã được phát hành chưa?
Phiên bản Vue mới nhất hiện có - Vue3, ban đầu được công bố vào giữa năm 2018 và phát hành chính thức vào tháng 9 năm 2020. Vue3.0 được tuyên bố là phiên bản mặc định chính thức của khung javascript tiến bộ vào ngày 7 tháng 2 năm 2022.
Có gì mới trong Vue3?
Những thay đổi thú vị nhất được mong đợi trong Vue3 là:
cung cấp/tiêm
Vue 2 cho phép người dùng truyền dữ liệu như chuỗi, mảng, đối tượng, v.v. thông qua các đạo cụ trong mã. Dữ liệu như vậy có thể dễ dàng được chuyển từ phần tử cha sang phần tử con của nó. Tuy nhiên, việc sử dụng các đạo cụ khiến việc gửi dữ liệu từ phần tử cha sang phần tử con được lồng sâu trở nên khó khăn hơn. Do đó, các nhà phát triển phải sử dụng Vuex Store và Event Hub. Vue 2.2.0 cũng bao gồm cung cấp/tiêm, nhưng không nên sử dụng nó trong mã chương trình chung.
Tuy nhiên, bằng cách sử dụng kết hợp supply/inject cải tiến trong Vue3, chúng ta có thể truyền dữ liệu nhanh chóng và gọn gàng hơn. Như tên cho thấy, chúng tôi sử dụng để cung cấp để làm cho dữ liệu có thể truy cập được từ phần tử gốc đến bất kỳ thành phần con nào của nó, bất kể các phần tử con đó được lồng sâu đến mức nào. Ở đây, chúng ta có thể sử dụng cung cấp dưới dạng đối tượng hoặc dưới dạng hàm.
dịch chuyển tức thời
Dựa trên logic của ứng dụng bạn muốn xây dựng, các thành phần của bạn có thể được hiển thị ở những nơi khác với nơi bạn muốn chúng hiển thị. Ví dụ: bạn có thể muốn tạo một cửa sổ bật lên dự định xuất hiện và chiếm toàn bộ màn hình. Để khắc phục điều này, chúng ta có thể sử dụng thuộc tính vị trí của các thành phần đó trong CSS, nhưng với Vue3, các nhà phát triển cũng có thể sử dụng Dịch chuyển.
Dịch chuyển tức thời cho phép các lập trình viên lấy một thành phần từ vùng chứa ban đầu mà nó được bao bọc bên trong và di chuyển chúng đến bất kỳ thành phần nào đã tồn tại trên trang mà chúng đang được sử dụng. Ví dụ: bạn có thể di chuyển phần tử tiêu đề từ div #app sang tiêu đề. Hãy nhớ rằng bạn chỉ có thể sử dụng Dịch chuyển tức thời để di chuyển các thành phần đến các thành phần mã tồn tại bên ngoài Vue DOM.
mảnh vỡ
Rất khó để có một số thành phần gốc trong mẫu của tệp trong Vue 2. Các lập trình viên bắt đầu đặt tất cả các thành phần trong thành phần gốc như một giải pháp cho cùng một thành phần. Đôi khi, các lập trình viên có thể cần kết xuất một phần tử mà không có vùng chứa bao quanh nó. Các kỹ sư giờ đây có thể có nhiều mục trong tệp mẫu gốc của họ nhờ Fragments, đây là một tính năng được thêm vào Vue3.
API Vue toàn cầu
Bạn có thể thường xuyên tìm thấy Vue.component hoặc Vue.use trong tệp main.js của ứng dụng Vue. Chúng được gọi là API toàn cầu và có nhiều phương pháp như vậy trong Vue 2. Ở đây nếu bạn có nhiều phiên bản ứng dụng của mình, tất cả chúng đều được đặt trên đỉnh Vue. Rất khó để giới hạn chức năng cụ thể cho một phiên bản ứng dụng.
Vue3 giải quyết vấn đề này bằng cách giới thiệu API toàn cầu mới có tên là createApp. Với phương pháp này, bạn có thể lấy một phiên bản mới của ứng dụng Vue. Tất cả các API liên quan đến Vue 2.x sẽ được chuyển sang các phiên bản ứng dụng riêng biệt. Điều này cho phép mọi phiên bản ứng dụng của bạn có các chức năng dành riêng cho nó mà không làm gián đoạn các phiên bản khác đang được sử dụng.
API sự kiện
Ngoài việc sử dụng Vuex Store, việc sử dụng Event Bus là một trong những phương pháp phổ biến nhất mà các lập trình viên đã sử dụng để truyền dữ liệu giữa các phần tử không chia sẻ bối cảnh cha-con. Tuy nhiên, các mã như $on, $off và $once đều bị xóa trong Vue3. Nhưng $emit vẫn có thể truy cập được vì các phần tử con phải phát ra các sự kiện cho các phần tử cha của chúng. Một giải pháp cho vấn đề này là sử dụng cung cấp/tiêm.
Chuỗi công cụ xây dựng do Vite cung cấp
Được thiết kế bởi Evan You, người tạo ra Vue, Vite là chuỗi công cụ hỗ trợ Vue SFC hàng đầu, nhẹ và tạo nhanh. Vite hiện là công cụ đằng sau cấu hình xây dựng Vue3 tiêu chuẩn. Gói mô-đun @vue-cli/service , được xây dựng trên gói webpack, sẽ bao bọc toàn bộ ứng dụng Vue của bạn khi khởi chạy, tải lại nóng và biên dịch. Mặt khác, Vite sẽ lấy cú pháp ES Import từ mã chương trình của bạn và cho phép trình duyệt phân tích từng lần nhập trước khi gửi yêu cầu HTTP.
Sự thay đổi đang được thực hiện chủ yếu vì lý do tốc độ. Máy chủ bắt đầu ngay lập tức vì nó sử dụng hỗ trợ trình duyệt gốc cho các thành phần JavaScript và nhanh hơn nhiều.
Cú pháp API thành phần
API tùy chọn đã được sử dụng để tạo trạng thái phần tử và logic. API Thành phần đã được Vue3 đưa ra để thay thế cho API tương tự. Nó chỉ đơn thuần là một tập hợp các API cho phép chúng ta tạo các phần tử Vue mà không cần xác định các tùy chọn bằng cách sử dụng các phương thức đã nhập.
API sáng tác chứa các API sau:
API phản ứng - Ví dụ: ref() và Reactive(). Nó có thể trực tiếp xây dựng trạng thái phản ứng, trạng thái được tính toán và người theo dõi bằng cách sử dụng điều này.
Móc vòng đời - Ví dụ: onMounted() và onUnmount(). Chúng ta có thể móc vào vòng đời của phần tử bằng móc vòng đời.
Tiêm phụ thuộc - Ví dụ: cung cấp() và tiêm(). Việc sử dụng hệ thống tiêm phụ thuộc của Vue với API phản ứng có thể thực hiện được bằng cách tiêm phụ thuộc.
Ưu điểm của việc sử dụng API thành phần
Ưu điểm chính của việc sử dụng API tổng hợp so với API tùy chọn là:
- Một phần tử không còn cần thiết với Vue3 để tạo trạng thái phản ứng.
- Khi thêm nhiều thuộc tính phản ứng, thiết lập trong các phần tử Vue.js có thể trở nên cồng kềnh. Có thể hữu ích nếu các biến phản ứng này được trừu tượng hóa trong các tệp javascript riêng biệt vì điều này.
- Lợi ích chính của API Thành phần là nó cho phép sử dụng lại logic rõ ràng, hiệu quả dưới dạng các phương thức Có thể kết hợp. Nó giải quyết tất cả các vấn đề với mixin, phương pháp chính để sử dụng lại logic trong API tùy chọn.
- Bạn có thể nhập mã trong API Thành phần với suy luận kiểu hoàn chỉnh.
- Các chương trình bạn viết trong API Thành phần hiệu quả hơn và tên của các biến có thể được đặt nhỏ hơn. Điều này làm giảm chi phí.
- Bạn có thể chia sẻ mã chương trình của mình tốt hơn với API Thành phần.
Pinia
Pinia là một công cụ quản lý trạng thái nhẹ dành cho Vue.js. Nó cho phép chúng tôi chia sẻ trạng thái giữa các phần tử và trang. Nó tạo ra một khung quản lý trạng thái được nhập hoàn toàn, thân thiện với người dùng bằng cách sử dụng khái niệm phản ứng mới trong Vue3. Đây hiện là thư viện kiểm soát trạng thái tiêu chuẩn mới của Vue3.
Pinia ban đầu phục vụ như một nghiên cứu về tiềm năng của Vuex. Trong một thời gian dài, Vuex là hệ thống quản lý trạng thái được đề xuất cho Vue, nhưng với Vue3, Pinia là hệ thống được đề xuất để quản lý trạng thái trong tài liệu chính thức. Hiện tại, Vuex đang ở chế độ bảo trì. Mặc dù nó vẫn tiếp tục hoạt động nhưng sẽ không có tính năng mới nào được thêm vào. Nên sử dụng Pinia cho các ứng dụng mới.
Tại sao Pinia?
Pinia rất nhẹ, chỉ lên tới 1KB. Ngoài ra, nó tích hợp với các công cụ dành cho nhà phát triển Vue.js để cải thiện trải nghiệm mã hóa của bạn trong Vue 2 và Vue3. Vì Pinia suy ra tất cả các kiểu dữ liệu của bạn nên nó cũng có thể cung cấp cho bạn khả năng hoàn thành tự động đầy đủ và chính xác trong javascript. Pinia cũng được thiết kế theo mô-đun, thân thiện với người dùng và có thể mở rộng. Nhìn chung, Pinia có vẻ nhẹ, không phức tạp và đơn giản. Nó gần giống với việc xử lý các phần tử và chứa tất cả các công cụ cần thiết cho lập trình động trong Vue3.
Vue 2 sẽ không được dùng nữa?
Bản cập nhật nhỏ gần đây nhất cho Vue 2 là Vue 2.7, được phát hành vào tháng 7 năm 2022. Vue 2 hiện đang ở chế độ bảo trì. Mặc dù sẽ không có tính năng bổ sung nào được xuất xưởng, nhưng nó vẫn sẽ nhận được các bản sửa lỗi quan trọng và bản vá bảo mật trong 18 tháng. Đến cuối năm 2023, Vue 2 sẽ không còn được dùng nữa.
Di chuyển từ Vue 2
Dựa trên phần mềm của bạn, việc chuyển sang Vue3 có thể không đáng nếu bạn đang làm việc trên một dự án cực kỳ lớn bằng Vue 2. Hãy sử dụng Vue3 nếu các vấn đề về hiệu quả vẫn tiếp diễn mặc dù bạn đã nỗ lực hết sức để tối ưu hóa.
Việc bạn có muốn di chuyển ứng dụng của mình sang Vue3 hay không tùy thuộc vào kích thước và độ phức tạp của nó. Phần lớn cú pháp và kỹ thuật trong Vue 2 giống như trong Vue3. Tuy nhiên, nếu bạn muốn sử dụng một số thay đổi được đề cập ở trên, thì việc di chuyển sẽ là một ý tưởng tốt hơn.
Vue.js trong dự án AppMaster
Nền tảng AppMaster sử dụng khung VueJS, hay đúng hơn là phiên bản thứ ba của khung, để tạo ứng dụng giao diện người dùng cho người dùng của chúng tôi. Vue 3 được sử dụng để tạo cổng quản trị viên, bảng điều khiển và máy khách và toàn bộ giao diện của AppMaster studio cũng thực sự được tạo bằng khung VueJS.
Chúng tôi sử dụng một phương pháp đặc biệt được gọi là micro-frontends hoặc microservices front-end để có thể phát triển sản phẩm của chúng tôi một cách nhanh chóng và hiệu quả; ví dụ: mỗi trình chỉnh sửa mô hình dữ liệu và trình chỉnh sửa quy trình kinh doanh là một ứng dụng giao diện người dùng hoàn toàn riêng biệt trong nền tảng của chúng tôi. Điều này cho phép chúng tôi phát triển rất nhanh chóng và độc lập theo quan điểm của nhóm phát triển, giúp tăng tốc độ tổng thể của sản phẩm của chúng tôi. Tất cả những lợi thế này mà khách hàng của chúng tôi có thể nhận được khi sử dụng các ứng dụng của chúng tôi.
Trong tương lai, ngoài chế độ ứng dụng một trang SPA, chúng tôi sẽ thêm chế độ SSR (kết xuất phía máy chủ), cho phép khách hàng của chúng tôi tạo không chỉ bảng quản trị và cổng tùy chỉnh mà cả các trang web đầy đủ tính năng với rất tối ưu SEO cao.
Về không có mã
Một trong những yếu tố chính ảnh hưởng đến quá trình dân chủ hóa mã hóa là phương pháp phát triển không cần mã . Ngày nay, ngày càng nhiều người có thể tiếp cận lập trình nói chung mà không cần viết mã. Nó làm cho việc thiết kế web, phát triển ứng dụng di động và phát triển web đáp ứng trở nên đơn giản hơn.
AppMaster là một trong những ứng dụng có thể được sử dụng để tự động tạo mã nguồn. Bạn có thể xem và kiểm tra mã bất cứ lúc nào. Với AppMaster, bạn có tùy chọn tùy chỉnh thông tin dự án bằng ngôn ngữ máy tính. Chúng tôi cũng cho phép mọi người xuất mã nếu họ muốn. Đây là sự đảm bảo rằng bạn có toàn quyền kiểm soát và quyền sở hữu đối với ứng dụng mà bạn đang làm việc với AppMaster.
kết luận
Nếu bạn muốn giải thích chi tiết hơn về sự khác biệt của Vue3 so với Vue 2, cùng với các đoạn mã, bạn có thể xem qua tài liệu chính thức của Vue.js. Chúng tôi đã đề cập đến hầu hết các thay đổi chính mà bạn nên biết. Điều quan trọng là bạn phải biết các bản cập nhật cho Vue3 nếu bạn quan tâm đến việc xây dựng các ứng dụng với khuôn khổ này.
