Phát hành Vue 3.5 "Tengen Toppa Gurren Lagann"

• Bản phát hành minor này bao gồm các cải tiến nội bộ và nhiều tính năng mới hữu ích, không có thay đổi phá vỡ khả năng tương thích

Tối ưu hệ thống Reactivity

• Hệ thống reactivity của Vue đã được refactor quy mô lớn để cải thiện hiệu năng và giảm mức sử dụng bộ nhớ (-56%), không có thay đổi về hành vi
• Việc refactor cũng giải quyết các vấn đề về giá trị tính toán và bộ nhớ trong quá trình SSR
• Trong 3.5, việc theo dõi reactivity cho các mảng reactive lớn và sâu đã được tối ưu, nhanh hơn tới 10 lần trong một số trường hợp

Reactive Props Destructure

• Tách cấu trúc props reactive đã được ổn định trong 3.5 và được bật mặc định
• Trong <script setup>, các biến được tách cấu trúc từ lời gọi defineProps giờ đây đã có tính reactive
• Tính năng này tận dụng cú pháp giá trị mặc định gốc của JavaScript để đơn giản hóa đáng kể việc khai báo props có giá trị mặc định

Cải tiến SSR

Lazy Hydration

• Các component bất đồng bộ giờ đây có thể kiểm soát thời điểm hydration bằng cách chỉ định chiến lược thông qua tùy chọn hydrate của API defineAsyncComponent()

useId()

• useId() là API có thể dùng để tạo ID duy nhất cho từng ứng dụng, được đảm bảo ổn định giữa render phía máy chủ và phía máy khách
• Có thể dùng để tạo ID cho phần tử biểu mẫu và các thuộc tính trợ năng, đồng thời sử dụng trong ứng dụng SSR mà không gây lệch hydration

data-allow-mismatch

• Khi giá trị phía máy khách chắc chắn sẽ khác giá trị phía máy chủ (ví dụ: ngày tháng), có thể dùng thuộc tính data-allow-mismatch để chặn cảnh báo lệch hydration
• Cũng có thể cung cấp giá trị cho thuộc tính này để giới hạn loại lệch được cho phép (text, children, class, style, attribute)

Cải tiến custom element

• 3.5 đã sửa nhiều vấn đề tồn đọng lâu dài liên quan đến API defineCustomElement() và bổ sung nhiều tính năng mới để xây dựng custom element bằng Vue
• Hỗ trợ cấu hình ứng dụng cho custom element thông qua tùy chọn configureApp
• Bổ sung các API useHost(), useShadowRoot() và this.$host để truy cập phần tử host và shadow root của custom element
• Hỗ trợ mount custom element mà không cần Shadow DOM bằng cách truyền shadowRoot: false
• Hỗ trợ cung cấp tùy chọn nonce, tùy chọn này sẽ được gắn vào các thẻ <style> do custom element chèn vào

Các tính năng đáng chú ý khác

useTemplateRef()

• 3.5 giới thiệu một cách mới để lấy template ref thông qua API useTemplateRef()
• Trước 3.5, cách được khuyến nghị là dùng ref thông thường với tên biến khớp với thuộc tính ref tĩnh
• Cách tiếp cận trước đây bị giới hạn ở thuộc tính ref tĩnh vì compiler cần phải phân tích được thuộc tính ref
• Ngược lại, useTemplateRef() khớp ref thông qua ID chuỗi ở runtime nên hỗ trợ binding ref động cho các ID có thể thay đổi

Teleport trì hoãn

• Một giới hạn đã biết của component tích hợp <Teleport> là phần tử đích phải tồn tại vào thời điểm component teleport được mount
• Điều này trước đây ngăn người dùng teleport nội dung tới phần tử khác cũng được render bởi Vue
• Trong 3.5, defer prop đã được giới thiệu cho <Teleport> được mount sau chu kỳ render hiện tại, nên giờ điều này đã hoạt động

onWatcherCleanup()

• 3.5 giới thiệu onWatcherCleanup(), một API được import toàn cục để đăng ký callback dọn dẹp trong watcher

[narusas]

Bản phát hành lần này thực sự đã nâng mức độ tiện lợi lên rất nhiều khi phát triển component.

[xguru]

Tên phiên bản lần này là "Tengen Toppa Gurren Lagann" nhỉ. (một tác phẩm kinh điển! Có lẽ đây là tác phẩm cuối cùng của Gainax mà tôi đã xem)

Vue theo truyền thống? đã mượn tên các bộ manga/anime. 1.0 là Evangelion, 2.0 là Ghost in the Shell, 3.0 là One Piece, 3.3 là Rurouni Kenshin, 3.4 là Slam Dunk
https://en.wikipedia.org/wiki/Vue.js#Versions