Vue 3 - Sự phát triển của Vue trong năm 2022

Kể từ ngày 7 tháng 2 năm 2022 , Vue 3 là phiên bản mặc định của Vue. Sự thay đổi này là đỉnh điểm của hơn hai năm thay đổi trong hệ sinh thái Vue. Trong thời gian này, nhiều thứ đã thay đổi:

• API thành phần mới cho phép nhiều mã có thể tổng hợp hơn đồng thời mở đường cho việc áp dụng TypeScript dễ dàng hơn ;
• Vite đã chiếm lĩnh không gian phát triển web như vũ bão, mang lại quy trình phát triển dựa trên ESM siêu nhanh cho Vue và nhiều khung công tác khác;
• Trên tất cả những điều trên, Vue đã trở nên nhanh hơn nhiều và hệ sinh thái của nó đã được nâng cấp trên toàn diện.

Bài viết này sẽ xem xét tất cả những thay đổi mà Vue đã trải qua. Chúng ta sẽ thảo luận về ý nghĩa của chúng đối với các nhà phát triển Vue, cách chúng tác động đến sự phát triển web nói chung và những gì sắp xảy ra trong tương lai.

Sự phát triển của Vue

Hãy bắt đầu với những thay đổi trong lõi Vue và thư viện bên thứ nhất của nó.

Các thay đổi về API cốt lõi

Thay đổi quan trọng nhất đối với lõi Vue chắc chắn là API thành phần. API mới không chỉ làm cho Vue API có nhiều chức năng hơn và có thể tổng hợp được mà còn giảm bớt sự phụ thuộc vào những thứ đáng sợ thisvà cung cấp cho các nhà phát triển Vue một mô hình phản ứng linh hoạt hơn.

TypeScript, SFCs và JSX API Thành phần đi kèm với việc viết lại toàn bộ cơ sở mã trong TypeScript. Bên cạnh những lợi thế về kiến ​​trúc, việc sử dụng TS có nghĩa là cách đánh máy tốt hơn và hỗ trợ tự động hoàn thành trong các IDE hiện đại như VS Code. Động thái này chỉ tăng tốc hơn nữa việc chấp nhận TS bằng cách hướng toàn bộ hệ sinh thái Vue theo hướng của nó.

Trên hết, Vue Single File Components (SFCs) cũng nhận được bản nâng cấp dưới dạng <script setup> đường cú pháp và các biến CSS hướng trạng thái với v-bindtrong <style>các phần.

Đối với những người đến từ nền tảng React, các chuyển đổi JSX cũng đã được nâng cấp, có nghĩa là bạn có thể mong đợi trải nghiệm phát triển tốt hơn nếu bạn định sử dụng Vue với JSX / TSX .

Mệt mỏi khi quyết định Với tất cả những điều trên, bây giờ có nhiều sự lựa chọn hơn bao giờ hết về cách bạn cấu trúc ứng dụng Vue của mình. API thành phần hay API tùy chọn? JS hay TS? <script setup>hay không? Có thể bạn muốn từ bỏ hoàn toàn SFC và sử dụng JSX? Với rất nhiều lựa chọn, sự mệt mỏi về quyết định là có thật đối với các nhà phát triển Vue sắp ra mắt. Không có dấu hiệu cho thấy Vue ngày càng cố chấp, bạn nên có niềm tin mạnh mẽ và kinh nghiệm tốt với thiết lập Vue mà bạn lựa chọn.

Vite

Tôi cho rằng trong năm ngoái, không có một thư viện hoặc công cụ nào trong toàn bộ hệ sinh thái bên thứ nhất của Vue có tác động mạnh như Vite. Kể từ khi phát hành, nó đã chiếm lĩnh không gian phát triển web như vũ bão, nhanh chóng trở thành công cụ thích hợp cho nhiều nhà phát triển - bất kể họ đến từ khuôn khổ nào.

Bây giờ, Vite không phải là đầu tiên cũng không phải là cuối cùng của loại hình này - Snowpack và WMR đã xuất hiện trong tâm trí. Tuy nhiên, do có mối liên hệ chặt chẽ với một framework phổ biến như Vue, cấu hình đơn giản, đầu ra sản xuất được tối ưu hóa, tích hợp với Rollup và các ưu điểm khác, Vite đã trở nên nổi tiếng nhất cùng loại. Sự gia tăng phổ biến của nó đã mang lại một cấp độ trải nghiệm phát triển hoàn toàn mới cho nhiều nhà phát triển, nâng cao tiêu chuẩn cho các công cụ khác trong hệ sinh thái để làm theo.

Thật an toàn khi nói rằng Vite đã ảnh hưởng rất nhiều đến nhiều xu hướng mà chúng ta thấy hiện nay trong không gian công cụ phát triển web. Chúng bao gồm việc chuyển sang Mô-đun ES đang được phát triển và sử dụng ngôn ngữ bản địa trong các gói để có hiệu suất tốt hơn (như Go được sử dụng để xây dựng hệ thống cung cấp năng lượng cho Vite trong chế độ phát triển). Không cần tìm đâu xa hơn Next.js 12 được phát hành gần đây với trình biên dịch Rust ( SWC ) để xem hiệu ứng gợn sóng này.

Khung Vue

Ngoài Vite, nhiều thư viện Vue của bên thứ nhất khác cũng được nâng cấp và một số thư viện mới đã được thêm vào. Các ví dụ bao gồm Vue Router , Pinia (Vuex kế thừa / thay thế), Vue Devtools , VitePress , v.v. , làm cho Vue trở thành một khuôn khổ thực sự, đầy đủ tính năng.

Giống như lõi Vue, tất cả các thư viện mới và nâng cấp đều có hỗ trợ TypeScript hạng nhất và API có thể tổng hợp.

Nhìn chung, Vue và các thư viện đi kèm của nó luôn bắt kịp các xu hướng mới nhất và thậm chí thiết lập một số thư viện của riêng họ để những người khác làm theo.

Phát lại phiên nguồn mở

Gỡ lỗi một ứng dụng web trong quá trình sản xuất có thể khó khăn và tốn thời gian. OpenReplay là một mã nguồn mở thay thế cho FullStory, LogRocket và Hotjar. Nó cho phép bạn theo dõi và phát lại mọi thứ mà người dùng của bạn làm và cho biết ứng dụng của bạn hoạt động như thế nào đối với mọi vấn đề. Nó giống như việc mở trình kiểm tra của trình duyệt trong khi nhìn qua vai người dùng của bạn. OpenReplay là giải pháp thay thế mã nguồn mở duy nhất hiện có.

Xây dựng lại hệ sinh thái

Như đã nói, Vue 3 không phải là tất cả đều là ánh nắng và cầu vồng, vì bản phát hành đã mang lại nhiều thay đổi đột phá . Mặc dù nhìn từ bên ngoài có vẻ không giống như vậy (đặc biệt nếu bạn sử dụng API Tùy chọn), Vue 3 vẫn có đủ những thay đổi này để khiến toàn bộ hệ sinh thái của Vue 2 không tương thích với nhau .

Mặc dù một số thay đổi khá dễ thực hiện, nhưng toàn bộ hệ sinh thái sẽ không chuyển đổi trong một sớm một chiều. Trên thực tế, sau cả năm Vue 3 beta, một số thư viện - ngay cả những thư viện phổ biến và được bảo trì tốt - vẫn chưa ở trong giai đoạn ổn định hoặc chưa chuyển đổi.

Vì vậy, vấn đề là rõ ràng - toàn bộ hệ sinh thái Vue cần được nâng cấp hoặc lấp đầy bằng công cụ mới. Do sự phổ biến của Vue, chắc chắn đó là một quyết định tốt về lâu dài vì hệ sinh thái cuối cùng sẽ xây dựng lại hoàn toàn và ở trạng thái tốt hơn trước. Tuy nhiên, để điều đó xảy ra, cần có thời gian và cam kết từ tất cả các nhà phát triển Vue.

Cho đến nay, quá trình này diễn ra khá suôn sẻ, nhưng một số công cụ quan trọng trong hệ sinh thái vẫn chưa ổn định. Các ví dụ bao gồm thư viện thành phần Vuetify (được cho là phổ biến nhất của loại này) và siêu khung công tác Nuxt.js Vue - cả hai đều thiếu các tính năng trong các bản phát hành ban đầu của chúng tại thời điểm viết bài.

Vì vậy, mặc dù mọi thứ vẫn chưa hoàn thiện, nhưng bạn có cơ hội khá cao để tìm ra các giải pháp thay thế cho hầu hết các vấn đề, nếu không phải là tất cả các vấn đề của bạn - cho dù là trong hệ sinh thái Vue hay framework-bất khả tri.

Tác động rộng hơn

Bây giờ, tôi đã đề cập đến việc áp dụng TypeScript và việc chuyển sang một API có thể kết hợp nhiều chức năng hơn và nó sẽ ảnh hưởng như thế nào đến hệ sinh thái Vue. Tôi cũng đã thảo luận về cách Vite cải thiện trải nghiệm phát triển trên các khuôn khổ và chịu trách nhiệm một phần về các xu hướng mới trong công cụ phát triển web. Nhưng tất cả các phần của Vue được kết hợp với nhau đã ảnh hưởng như thế nào đến bối cảnh phát triển web?

TypeScript phổ biến ở khắp mọi nơi

Với việc TypeScript đang tham gia vào một khuôn khổ khác, bây giờ có thể an toàn khi nói rằng nó phổ biến và hầu hết nếu không phải tất cả các thư viện JS hiện đại sẽ hỗ trợ nó hoặc áp dụng nó hoàn toàn.

TS, kết hợp với hỗ trợ JSX được cải thiện, hiệu suất tốt hơn và API thành phần giống Hooks, có thể khiến nhiều nhà phát triển React bắt đầu sử dụng Vue hơn, do đó dẫn đến việc mở rộng hệ sinh thái, cơ hội việc làm mới, v.v.

Tiếp tục áp dụng Vue 3

Vì Vue 3 hiện là “mặc định mới”, cột mốc quan trọng tiếp theo đối với hệ sinh thái là bản phát hành ổn định của Nuxt.js. Nó sẽ cung cấp cho Vue 3 siêu khung công tác giống Next.js để xây dựng các ứng dụng toàn ngăn xếp, thúc đẩy việc áp dụng Vue 3 hơn nữa. Với nó, các nhà phát triển Vue cũng sẽ dễ dàng truy cập vào những tiến bộ mới nhất trong kết xuất phía máy chủ (SSR) và tạo trang web tĩnh (SSG).

Prop

Ngoài tất cả những điều đó, khi Vite và các công cụ cơ bản như esbuild phát triển, chúng ta nhất định sẽ thấy sự phát triển thậm chí tốt hơn và nhanh hơn trên nhiều công cụ hơn bao giờ hết. Chúng ta đã có thể thấy Vite cung cấp năng lượng cho các công ty như Astro - kết hợp sự phát triển nhanh chóng với các trang web siêu chất lượng nhờ quá trình hydrat hóa một phần . 

Trên đây là một số thông tin về Vue 3 trong năm 2022 bạn có thể tham khảo thêm để ứng dụng vào các dự án sắp tới của mình! Bạn cũng có thể tìm hiểu thêm thông tin các khóa học lập trình khác của Viện công nghệ thông tin T3H.