เปิดตัว Vue 3.5 "Tengen Toppa Gurren Lagann"

• รีลีสย่อยครั้งนี้มีทั้งการปรับปรุงภายในและฟีเจอร์ใหม่ที่มีประโยชน์ โดยไม่มีการเปลี่ยนแปลงที่ทำให้ความเข้ากันได้เดิมพัง

การปรับแต่งระบบ Reactivity

• ระบบรีแอ็กทีฟของ Vue ถูกรีแฟกเตอร์ครั้งใหญ่เพื่อเพิ่มประสิทธิภาพและลดการใช้หน่วยความจำ (-56%) โดยไม่มีการเปลี่ยนแปลงพฤติกรรมการทำงาน
• การรีแฟกเตอร์นี้ยังแก้ปัญหาค่าที่คำนวณระหว่าง SSR และปัญหาหน่วยความจำ
• ใน 3.5 มีการปรับแต่งการติดตามรีแอ็กทีฟสำหรับอาร์เรย์รีแอ็กทีฟที่มีขนาดใหญ่และซ้อนลึก ทำให้บางกรณีเร็วขึ้นได้สูงสุด 10 เท่า

Reactive Props Destructure

• การแยกโครงสร้าง Props แบบรีแอ็กทีฟใน 3.5 ถูกยกระดับเป็นสถานะเสถียรและเปิดใช้งานเป็นค่าเริ่มต้น
• ใน <script setup> ตัวแปรที่แยกโครงสร้างจากการเรียก defineProps ตอนนี้เป็นรีแอ็กทีฟแล้ว
• ฟีเจอร์นี้ช่วยให้การประกาศ props ที่มีค่าเริ่มต้นง่ายขึ้นมาก โดยอาศัยไวยากรณ์ค่าเริ่มต้นของ JavaScript เอง

การปรับปรุง SSR

Lazy Hydration

• ตอนนี้คอมโพเนนต์อะซิงก์สามารถควบคุมจังหวะการไฮเดรตได้ โดยระบุกลยุทธ์ผ่านตัวเลือก hydrate ของ API defineAsyncComponent()

useId()

• useId() คือ API สำหรับสร้าง ID ที่ไม่ซ้ำกันต่อแอปพลิเคชันหนึ่งชุด ซึ่งรับประกันความเสถียรทั้งในการเรนเดอร์ฝั่งเซิร์ฟเวอร์และฝั่งไคลเอนต์
• สามารถใช้สร้าง ID สำหรับองค์ประกอบฟอร์มและแอตทริบิวต์ด้านการเข้าถึงได้ และใช้งานในแอป SSR ได้โดยไม่เกิด hydration mismatch

data-allow-mismatch

• ในกรณีที่ค่าฝั่งไคลเอนต์จำเป็นต้องต่างจากค่าฝั่งเซิร์ฟเวอร์อย่างหลีกเลี่ยงไม่ได้ (เช่น วันที่) สามารถใช้แอตทริบิวต์ data-allow-mismatch เพื่อระงับคำเตือน hydration mismatch ได้
• นอกจากนี้ยังสามารถใส่ค่าให้แอตทริบิวต์เพื่อจำกัดประเภทของความไม่ตรงกันที่อนุญาตได้ (text, children, class, style, attribute)

การปรับปรุง Custom Element

• 3.5 แก้ปัญหาระยะยาวจำนวนมากที่เกี่ยวข้องกับ API defineCustomElement() และเพิ่มฟีเจอร์ใหม่หลายอย่างสำหรับการเขียน custom element ด้วย Vue
• รองรับการตั้งค่าแอปสำหรับ custom element ผ่านตัวเลือก configureApp
• เพิ่ม API useHost(), useShadowRoot() และ this.$host เพื่อเข้าถึง host element และ shadow root ของ custom element
• รองรับการเมานต์ custom element โดยไม่ใช้ Shadow DOM ด้วยการส่ง shadowRoot: false
• รองรับตัวเลือก nonce ซึ่งจะถูกแนบไปกับแท็ก <style> ที่ custom element ฉีดเข้าไป

ฟีเจอร์เด่นอื่น ๆ

useTemplateRef()

• 3.5 เพิ่มวิธีใหม่ในการอ้างอิงเทมเพลตผ่าน API useTemplateRef()
• ก่อน 3.5 แนวทางที่แนะนำคือใช้ ref ทั่วไปโดยตั้งชื่อตัวแปรให้ตรงกับแอตทริบิวต์ ref แบบสแตติก
• วิธีเดิมถูกจำกัดไว้กับแอตทริบิวต์ ref แบบสแตติก เพราะคอมไพเลอร์ต้องสามารถวิเคราะห์แอตทริบิวต์ ref ได้
• ตรงกันข้าม useTemplateRef() จับคู่การอ้างอิงผ่าน ID แบบสตริงในรันไทม์ จึงรองรับการผูกอ้างอิงแบบไดนามิกสำหรับ ID ที่เปลี่ยนแปลงได้

Teleport แบบหน่วงเวลา

• ข้อจำกัดที่ทราบกันของคอมโพเนนต์ <Teleport> ที่มีมาในตัว คือองค์ประกอบปลายทางต้องมีอยู่แล้วตอนที่คอมโพเนนต์ teleport ถูกเมานต์
• ข้อจำกัดนี้เคยทำให้ผู้ใช้ไม่สามารถ teleport เนื้อหาไปยังองค์ประกอบอื่นที่ Vue เรนเดอร์ขึ้นมาได้
• ใน 3.5 มีการเพิ่ม prop defer สำหรับ <Teleport> ที่จะเมานต์หลังรอบการเรนเดอร์ปัจจุบัน จึงสามารถทำงานลักษณะนี้ได้แล้ว

onWatcherCleanup()

• 3.5 เพิ่ม onWatcherCleanup() ซึ่งเป็น API ที่นำเข้าแบบโกลบอลสำหรับลงทะเบียนคอลแบ็ก cleanup ภายใน watcher

[narusas]

ในการออกเวอร์ชันนี้ ความสะดวกตอนพัฒนาคอมโพเนนต์จริง ๆ เพิ่มขึ้นอย่างมากเลยครับ

[xguru]

ดูเหมือนว่าชื่อเวอร์ชันนี้คือ "Tengen Toppa Gurren Lagann" สินะ (เป็นผลงานระดับคลาสสิกเลย! เท่าที่ผมดูของ Gainax มา นี่น่าจะเป็นเรื่องสุดท้าย)

Vue มีธรรมเนียม? ในการนำชื่อการ์ตูนมาใช้ 1.0 คือ Evangelion, 2.0 คือ Ghost in the Shell, 3.0 คือ One Piece, 3.3 คือ Rurouni Kenshin, 3.4 คือ Slam Dunk
https://en.wikipedia.org/wiki/Vue.js#Versions