Category: Vue.js

1. แม้ features จะเพิ่มขึ้น แต่ประสิทธิภาพดีกว่า เวอร์ชัน 2 และมีขนาดเล็กลง

.
2. Codebase เขียนด้วย TypeScript ทำให้รองรับ TypeScript ได้ดีขึ้น

.
3. เปลี่ยนวิธีการเขียนมาเป็นรูปแบบที่เรียกว่า Composition API แทน Options API แบบเดิม คือ ถ้าเป็นเวอร์ชันปัจจุบันเราจะเขียนโค้ดเข้าไปที่ option properties ต่างๆ เช่น data, methods, computed เป็นต้น แน่นอนปัญหาคือ เราจะต้องเรียนรู้ว่าตัวไหนใช้ทำอะไร (ไม่ใช่โค้ด js เพียวๆ ที่สามารถใช้งานได้เลย) และตัว compiler เองก็ต้องมีการ transform properties ต่างๆเหล่านี้ให้สามารถทำงานได้อีกทีหนึ่ง

ในเวอร์ชัน 3 จะเปลี่ยน properties ต่างๆ เหล่านี้ให้เขียนเป็นฟังก์ชัน JavaScript เลย หรือเรียกว่า Composition API (function-based APIs) ข้อดีคือ ทำให้เราสามารถอ่าน และเรียนรู้โค้ดได้ง่ายขึ้น ตรงไปตรงมา เพราะเป็นฟังก์ชัน JavaScript ปกติที่เขียนกันทุกวันนั่นเอง (ตามรูป)

ใครที่อยากศึกษา API นี้ ตามไปดูได้ที่ => https://bit.ly/3exgU4A

.
4. เพิ่ม Fragment เข้ามาเลย (ไม่ต้องลง library เพิ่มแล้ว) ใครเคยเขียน React น่าจะคุ้นๆ นะครับ ต่อไปเราไม่จำเป็นต้องเขียน root node มาครอบที่ template แล้วครับ
ใน Vue 3 จะมีการแทรก virtual element (Fragment) มาให้เลย

ต่อไปก็เขียนแบบนี้ได้เลย (ไม่ต้องครอบ root node ให้กับ h1 และ p แล้ว)

<template>
<h1>Hello</h1>
<p>CodingThailand.com</p>
</template>

ไม่ต้องเขียนแบบนี้ หรือลง library เพิ่ม
<template>
<div>
<h1>Hello</h1>
<p>CodingThailand.com</p>
</div>
</template>

5. Suspense (ไอเดียมาจาก React) ใน Vue 3 จะเพิ่ม Suspense component เข้ามาทำให้เราสามารถแสดง content (ชั่วคราวตามเงื่อนไข) บางอย่างก่อนที่จะแสดง content จริงๆ ใครนึกไม่ออก ง่ายๆ ก็คือ การทำ Loading นั่นเองครับ เช่น ถ้าเราดึงข้อมูล User จาก Backend ถ้าดึงข้อมูลยังไม่เสร็จให้แสดง Loading… ก่อน ถ้าเสร็จแล้วค่อยแสดง UserProfile ครับ

<Suspense>
<template #default>
<UserProfile />
</template>
<template #fallback>
<div>Loading…</div>
</template>
</Suspense>

.
6. Teleport (เมื่อก่อนเรียกว่า Portal) ไว้สำหรับ render DOM นอก component หรือที่ใดๆ ก็ได้ใน document ครับ เช่น เอาไว้ทำพวก modals หรือ popups ตอนเวอร์ชัน 2 ต้องใช้ไลบรารีชื่อว่า portal-vue ครับ แต่เวอร์ชัน 3 จะเอาเข้ามาเลย

.
7. เปลี่ยน lifecycle ของ custom directives API ใหม่ให้เข้าใจง่ายขึ้น ตามนี้

const MyDirective = {
beforeMount(el, binding, vnode, prevVnode) {},
mounted() {},
beforeUpdate() {},
updated() {},
beforeUnmount() {}, // เพิ่มมาใหม่ ตัวอื่น เทียบกับเวอร์ชัน 2 ได้เลย
unmounted() {}
}

.
8. ในเวอร์ชัน 3 จะเอาการเขียน Filters แบบเดิมออกไปครับ เปลี่ยนมาเขียนแบบฟังก์ชันหรือ method แทน ดังนี้

เดิม

{{ price | thaibaht }}

ใหม่

{{ thaibaht(price) }}

.
9. สำหรับเวอร์ชัน 2.x จะออกเวอร์ชันสุดท้ายเป็น 2.7 (จะมีการ support ไปอีก 18 เดือน) และจะมีการแจ้งเตือน features ที่จะเอาออกในเวอร์ชัน 3 ด้วย

.
สุดท้าย คาดว่า Vue.js 3 ตัวจริง น่าจะมาราวๆไตรมาสที่ 2 ของปีนี้ครับ ใครอยากศึกษาก็อย่าลืมตามข่าวกันด้วยนะ

โค้ชเอก