Từ Vue 2 đến Vue 3: Những Thay Đổi Quan Trọng Bạn Cần Biết

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.

VueJS