Vue.js là một trong những framework JavaScript phổ biến nhất hiện nay, được yêu thích bởi tính đơn giản và linh hoạt. Với sự ra mắt của Vue 3, cộng đồng phát triển đã chứng kiến một bước tiến lớn về hiệu năng, khả năng tổ chức mã, và khả năng mở rộng ứng dụng. Trong bài viết này, chúng ta sẽ cùng khám phá những thay đổi đáng chú ý nhất khi chuyển từ Vue 2 lên Vue 3.
1. Thành phần cốt lõi: Composition API vs Options API
Vue 2: Options API Vue 2 sử dụng data, methods, computed, watch để tổ chức logic theo từng khối:
export default { data() { return { count: 0 }; }, methods: { increment() { this.count++; } }
}
Vue 3: Composition API (mới) Composition API giúp tái sử dụng logic dễ dàng hơn, đặc biệt trong các component lớn hoặc phức tạp.
import { ref } from 'vue'; export default { setup() { const count = ref(0); const increment = () => count.value++; return { count, increment }; }
}
Lợi ích: Tái sử dụng logic dễ dàng, tốt hơn khi sử dụng TypeScript, và hỗ trợ tốt hơn cho IDE & trình phân tích mã.
2. Hiệu năng: Vue 3 nhanh hơn
Vue 3 được viết lại bằng TypeScript từ đầu và mang lại nhiều cải tiến về hiệu năng:
- Hiệu quả bộ nhớ tốt hơn
- Thời gian render nhanh hơn
- Tree-shaking tốt hơn, giúp giảm kích thước bundle
Theo benchmark của Vue team, Vue 3 nhanh hơn Vue 2 từ 1.2 đến 2 lần trong nhiều trường hợp.
3. Fragment, Teleport và Suspense
Fragment
Vue 3 cho phép một component có nhiều root element mà không cần thẻ wrapper:
<!-- Vue 2: lỗi -->
<template> <h1>Title</h1> <p>Description</p>
</template> <!-- Vue 3: hợp lệ -->
Teleport Cho phép render nội dung vào một phần tử DOM bên ngoài root component (ví dụ: modal):
<teleport to="#modals"> <div class="modal">Modal content</div>
</teleport>
Suspense Hỗ trợ xử lý component async với fallback:
<suspense> <template #default> <AsyncComponent /> </template> <template #fallback> <LoadingSpinner /> </template>
</suspense>
4. API thay đổi & những điểm cần chú ý
| Tính năng | Vue 2 | Vue 3 |
|---|---|---|
| Global API | Vue.use(), Vue.component() |
app.use(), app.component() |
| Filters | HỖ TRỢ | Bị loại bỏ (dùng computed/methods thay thế) |
this.$on, $off, $once |
HỖ TRỢ | Bị loại bỏ (sử dụng emits) |
| Mixins | HỖ TRỢ | Hạn chế khuyến khích (dùng Composition API) |
5. TypeScript Support: Mạnh mẽ hơn
Vue 3 được viết hoàn toàn bằng TypeScript, cung cấp typing rõ ràng hơn, đặc biệt khi dùng Composition API. Điều này giúp:
- IDE hỗ trợ tốt hơn
- Phát hiện lỗi sớm
- Dễ refactor và mở rộng mã
6. Tổng kết
| Vue 2 | Vue 3 |
|---|---|
| Dễ học, đơn giản | Mạnh mẽ, mở rộng tốt hơn |
| Options API | Composition API (có thể chọn) |
| Hiệu năng tốt | Hiệu năng vượt trội |
| Một số giới hạn trong cấu trúc component | Hỗ trợ Fragment, Suspense, Teleport |
Vue 3 là một bước tiến lớn, giữ lại sự dễ dùng của Vue 2 nhưng bổ sung những tính năng mạnh mẽ hơn, hiện đại hơn. Nếu bạn đang bắt đầu dự án mới, nên dùng Vue 3 ngay từ đầu. Nếu bạn đang bảo trì Vue 2, việc nâng cấp dần dần cũng rất khả thi.