Vue 3 Guided Tour — พาเที่ยว Vue 3
แม้ว่า ณ ตอนนี้ Vue 3 ยังไม่ได้เปิดตัวมาเป็นทางการ แต่เราก็สามารถทดลองใช้งาน Vue Composition API และ Vue 3 ได้ในเวอร์ชันของ alpha
และวันนี้เราจะมาพาทุกคนทัวร์ Vue 3 ในเวอร์ชัน alpha.8 กัน โดยจะทัวร์ในโปรเจคของ vue-next-webpack-preview ซึ่งเป็นตัวอย่างการใช้งาน Vue 3 ที่มาพร้อมกับ Webpack ให้เรียบร้อยแล้ว
Feature และรายละเอียดของ Vue 3ภายในบทความนี้ ยังอยู่ในช่วงของ alpha version ซึ่งไม่แนะนำให้นำไปใช้ในงาน Production
Installation
เราจะเริ่มด้วยการ Clone โปรเจคนี้ลงมาที่เครื่องเรา พร้อมกับการติดตั้ง Dependencies และ run dev กันเลย
$ git clone https://github.com/vuejs/vue-next-webpack-preview.git
$ cd vue-next-webpack-preview
$ npm i
$ npm run devจะสังเกตตอนช่วง run dev นั้นทำงานไวมาก ๆ แต่ความพีคของเจ้า Vue 3 ตอนนี้คือ Vue.js devtools ไม่ทำงาน ซึ่งส่วนตัวคาดว่าถ้า Official แล้วน่าจะสามารถทำงานปกติ
main.js
เริ่มกันที่ไฟล์พระเอกของเรา จะเห็นว่าเราไม่จำเป็นต้องประกาศ Vue Instance เป็น Global อีกต่อไป เพราะเราสามารถใช้ createApp ที่เป็น API Function จาก vue ได้เลย และ createApp นี้จะทำให้บทบาทของ App Component จาก Root Component เป็น Root Instance ทันที
App.vue
มาต่อกันกับไฟล์ที่เราคุ้นเคยอย่าง App.vue ซึ่งเริ่มต้นด้วยรูป Vue บนหน้าจอ มีการเริ่มต้นที่คล้ายกับของ Vue 2
ความอัศจรรย์แรกที่เราเห็นคือ เราสามารถประกาศ Multiple Root ใน Template ได้แล้ว โดยเราไม่จำเป็นจะต้องสร้าง <div> มาครอบ Component เราเพิ่มอีกต่อไป
สิ่งที่เพิ่มเข้ามาจะเป็น setup() โดย Option นี้จะถูกเรียกในช่วง Lifecycle ระหว่าง beforeCreate และ created พร้อมกับการใช้งาน Vue Composition API และประกาศตัวแปรต่าง ๆ เรียกได้ว่าเป็นศูนย์รวมของ Logic เลยก็ว่าได้
การประกาศตัวแปรที่ทำให้เกิด Reactive References ได้นั้น มีอยู่ 2 ท่าหลักๆ ที่จะพบเห็นบ่อย นั่นคือ reactive ที่จะรับค่าเป็น Object และ ref ที่จะรับค่ามาเป็น Type อื่น ๆ ได้
ภายใต้การทำงานของ Vue 3 เมื่อใดที่
refรับค่าเป็น Object จะเป็นการเรียกใช้reactiveทันที
แต่อย่างไรก็ตาม เรายังคงสามารถใช้ Option API เดิมที่เราคุ้นเคยใน Vue 2 อย่าง data() , computed() , methods เป็นต้น
สำหรับใครที่อยากอ่าน Docs ของ Vue Composition API ของปัจจุบัน สามารถดูได้จากลิงค์ด้านล่างนี้ได้เลย
HelloWorld Benchmark
ด้วยความแอบซนของเรา ที่อยากรู้ว่าถ้าเรา Build โปรเจค Vue 3 นี้ที่มีเพียงไฟล์เริ่มต้นอย่าง HelloWorld.vue จะได้ Bundle Size รวมที่เล็กกว่า Vue 2 และไวกว่าหรือไม่
ทีนี้ก่อนที่เราจะเริ่ม Build เราเลย Copy ไฟล์ HelloWorld.vue จาก Vue 2 มาใส่ในโปรเจคนี้ เพื่อจะทำให้ Environment ของทั้งสองนั้นใกล้เคียงกันมากที่สุด และผลลัพธ์ที่ได้คือ
Vue v2.6.11
- Total Bundle Size: 631 KB
- Build Time: 11.01 วินาที
Vue v3.0.0-alpha.8
- Total Bundle Size: 442KB
- Build Time: 6.09 วินาที
ทำให้เห็นว่า Vue 3 นั้นสามารถ Build โปรเจคได้รวดเร็ว พร้อมกับได้ Bundle Size ที่เล็กกว่าของ Vue 2 อีกด้วย ทั้งนี้อาจจะต้องลองเทียบกันอีกทีในตอนที่ Official แล้ว
Single Transparent Wrapper และ Render Function แบบใหม่ยังใช้ไม่ได้
อันนี้ทำเราแอบเศร้าอยู่นิดหนึ่ง คือเราได้ลองทำ Single Transparent Wrapper จากตัวอย่างของ Chris Fritz ซึ่งมันยังคงใช้ไม่ได้ ในขณะเดียวกัน Render Function แบบใหม่ ก็ยังไม่สามารถใช้ได้
สำหรับใครที่อยากอ่านสรุป Feature เจ๋ง ๆ ของ Vue 3 จาก Chris Fritz สามารถอ่านได้จากบทความด้านล่างนี้ได้เลย
แม้ว่า Vue 3 ที่ ณ ตอนนี้ได้ทดลองเป็นเวอร์ชัน alpha แต่ก็ได้การพัฒนาที่ในเรื่องของการใช้งานที่ง่ายขึ้น อย่างการแยก createApp ออกมาเป็น API ที่นำไปใช้ได้ รวมถึง Vue Composition API และยังสามารถประกาศ Tag บน Template กี่อันก็ได้ ทำให้เพิ่มความสนุกไม่น้อย
สำหรับใครที่อยากติดตามข่าวสาร Vue.js และหาเพื่อนชาว Vue สามารถติดตามได้จาก Facebook Group ของ Vue.js Thailand ได้เลยครับ
