แอบส่อง Vue 3 มีอะไรให้ใช้บ้างนะ ?
ใกล้เข้ามาเรื่อยๆแล้วกับ Vue Version 3 ที่มีข่าวมาแรมปีแต่ก็ยังไม่ได้ใช้เสียที.. ก่อนวันนั้นจะมาถึงเรามาเตรียมความพร้อมกันก่อนดีกว่า ย่องไปชะแว๊บแอบดูกันว่ามันมีอะไรเปลี่ยนไป จะน่าใช้มากขึ้น หรือ จะลำบากจนน่าเบื่อกันนะ ไปดูกันครับ
Composition API vs Options API
Highlight ที่สุดใน Vue 3 คงหนีไม่พ้นเรื่อง “Composition API” ที่จะเข้ามาแทนที่ “Options API” นั่นเอง
Options API นั้นก็คือการเขียน JavaScript ใน Vue Component แบบปัจจุบันที่เราคุ้นชินกันอยู่แล้วนั่นแหละครับ เวลาเราอยากจะเพิ่มอะไรก็ใส่ option เข้าไปเลย ก็ตามตัวอย่าง code ด้านล่างนี้เลย
Options API
จริงๆมันก็สะดวกสบายดีอยู่แล้ว แต่การเข้ามาของ Composition API นั้นจะเน้นการ “Extract and Compose” หรือ ก็คือการแยก code ออกเป็นส่วนๆ และค่อยเรียกใช้เอาตามความเหมาะสม เพราะจะทำให้ code มัน reusable ได้มากขึ้นนั่นเอง
ตัวอย่าง เช่น ถ้ามีฟังก์ชั่น สำหรับ registerEventBus ที่ใช้งานในหลายๆ component ในการเขียนด้วย Options API เราอาจจะต้อง copy ฟังก์ชั่นนี้ไปใช้ใน Component อื่น ซึ่งมันจะทำให้เกิดการ Duplicate Logic ที่เมื่อเกิดการแก้ไข ก็ต้องตามแก้ทุกที่
เราสามารถแก้ปัญหานี้ได้ด้วยการแยก Logic ออกเป็นไฟล์ย่อยๆ แล้วเรียกกลับมาใช้ในแต่ละ Component อีกที ซึ่งวิธีนี้แหละคือการ “Extract and Compose” และใน Composition API นั้นจะทำให้การเขียนแบบนี้ง่ายขึ้นนั่นเอง พอทุกๆอย่างถูกแยกเป็นฟังก์ชั่นอย่างชัดเจน ก็จะทำให้เขียนด้วย TypeScript ได้ง่ายขึ้น ซึ่งนี่ก็เป็นอีกจุดแข็งของ Composition API นั่นก็คือ More TypeScript Friendly
อธิบายไปเยอะแล้วมาลองดูตัวอย่าง code กันสักเล็กน้อยดีกว่า
Composition API
ใครอยากได้ข้อมูลเพิ่มเติมเกี่ยวกับ Composition API แบบละเอียด คลิก
Multiple v-models
ถ้าใครที่เคยใช้ Vue ก็น่าจะเคยใช้ v-model กันอยู่แล้วซึ่งใน Version 3 นี้จะทำให้คุณสามารถใส่ v-models ได้มากกว่า 1 ตัว !!! เป็นยังไง เหวอเลยล่ะสิ ตอนอ่านเจอผมนี่คิดได้ทั้งข้อดีและข้อเสียเต็มไปหมด มันยืดหยุ่นและสามารถสร้างสรรค์อะไรได้มากมายกับการนำฟีเจอร์นี้มาปรับใช้ แต่ในอีกทางหนึ่งก็อาจจะสร้างความซับซ้อนได้มากขึ้นตามไปด้วยเช่นกัน เขียนแล้วจะออกมาเป็นยังไงนะ ลองดู….
<ExampleComp v-model:name="name" v-model:last="lastName" />Portals
อีกหนึ่งฟีเจอร์จาก React (อีกแล้ว) ที่ผมเชื่อว่าหลายๆท่านน่าจะเคยใช้ แต่อาจจะไม่ทราบว่ามันคือ Portals ! สรุปมันคืออะไรล่ะ ? ไปดูกันเลย
เคยประสบปัญหาที่เราเขียน component ลึกลงไปหลายๆชั้น แล้วอยากจะ render บางอย่างที่ root หรือ parent อะไรทำนองนี้ไหมครับ นั่นแหละครับท่านจะต้องใช้ Portals เพื่อส่งบางอย่างออกไป render ใน upper component สำหรับ Vue นั้นก็จะมี portal-vue ให้ใช้นั่นเองครัช
Portals คือ สิ่งที่ทำให้เราสามารถ render content ที่ต้องการออกไปใน DOM ที่อยู่ในระดับสูงกว่า (parent or upper) component ได้นั่นเอง
Fragments
อีกหนึ่งฟีเจอร์ที่น่าจะมาช่วยลดความน่ารำคาน และทำให้ชีวิตหลายๆคนดีขึ้นก็คือการมาของ fragments นั่นเอง มันคืออะไร ฟังแล้วหลายๆคนอาจจะร้อง อ๋อออ ชัวร์
จะเกิดอะไรขึ้นถ้าเราเขียน code แบบนี้…
<template>
<div>Node 1</div>
<div>Node 2</div>
</template>คำตอบคือ.. พัง !! เพราะ Vue ไม่ยอมให้มี root node มากกว่า 1 ตัวในแต่ละ component นั่นเอง ซึ่งถ้าเราจะให้มันเวิคเราต้องเขียนแบบนี้
<template>
<div><!--I'm just here for wrapping purposes-->
<div>Node 1</div>
<div>Node 2</div>
</div>
</template>ปัจจุบันถ้าเราจะเขียนในแบบแรกเราจะต้องใช้ vue-fragments เข้ามาช่วย ซึ่งใน Vue 3 เราสามารถเขียนแบบแรก ได้เลยโดยไม่ต้องลงอะไรเพิ่มนั่นเองครับ
ต้องขอบคุณ React มา ณ ที่นี้ด้วย เพราะจริงๆแล้วเขาก็ประสบปัญหาเดียวกันจนกระทั่งออกฟีเจอร์ Fragments ออกมา เอ๊ะทำไมชื่อเหมือนกันจังเลยนะ
สรุป
จริงๆแล้วใน Vue 3 นั้นยังมีอีกหลายฟีเจอร์มากๆ แต่ผมนำมาให้อ่านกันเพียงส่วนหนึ่งเท่านั้นเอง ก็มาลุ้นกันต่อว่าจะมีอะไรเปลี่ยนแปลงแก้ไขอีกหรือเปล่า เท่าที่อ่านๆมีฟีเจอร์เด็ดๆที่นำมาจาก React อยู่เยอะเหมือนกัน 55555+
สุดท้ายแล้วก่อน Vue 3 จะ Official Launch ก็อาจจะมีการเปลี่ยนแปลงไปอีกบ้าง แต่ทั้งหมดนี้ส่วนใหญ่ก็นับว่าเป็นการเปลี่ยนแปลงในทางที่ดี และน่าสนใจมากๆ เตรียมตัวเตรียมใจ และเปิดใจกันให้พร้อม (สำหรับการ migrate T-T)
