Vue 3 mang lại nhiều cải tiến về hiệu năng so với Vue 2, đặc biệt với Composition API, Proxy-based reactivity, và khả năng tree-shaking tốt hơn. Tuy nhiên, khi ứng dụng của bạn bắt đầu lớn lên, việc tối ưu hiệu năng là điều không thể bỏ qua.
Trong bài viết này, chúng ta sẽ cùng điểm qua các chiến lược tối ưu hiệu năng phổ biến, giúp ứng dụng Vue 3 của bạn nhanh hơn, nhẹ hơn và phản hồi tốt hơn.
1. Tránh render lại không cần thiết
Sử dụng v-memo (Vue 3.3+)
v-memo cho phép bạn cache kết quả render của một phần tử khi không có sự thay đổi. Ví dụ:
<div v-memo="[count]"> {{ heavyComputation(count) }}
</div>
Khi count không thay đổi, Vue sẽ không render lại phần tử này
2. Code splitting & lazy loading
Bạn không cần tải toàn bộ ứng dụng một lần. Hãy chia nhỏ bằng cách tải động các component khi cần.
const UserProfile = defineAsyncComponent(() => import('./UserProfile.vue'));
Kết hợp với Vue Router:
const routes = [ { path: '/user/:id', component: () => import('./views/UserProfile.vue'), },
];
3. Sử dụng defineProps, defineEmits, defineExpose thay vì setup()
Kể từ Vue 3.3, việc sử dụng các macro script setup như defineProps giúp giảm chi phí xử lý trong runtime và làm cho component nhẹ hơn.
<script setup>
defineProps(['title'])
</script>
4. Tránh watchers không cần thiết
Đừng dùng watch cho mọi thứ. Nếu bạn có thể xử lý bằng computed, hãy ưu tiên:
const fullName = computed(() => `${firstName.value} ${lastName.value}`);
Watchers thường có overhead lớn nếu sử dụng nhiều hoặc theo dõi deep object.
5. Tối ưu hoá danh sách lớn
Khi render danh sách dài (ví dụ: 1000+ item), bạn nên:
- Sử dụng virtual scrolling (ví dụ: vue-virtual-scroller)
- Tránh v-if trong mỗi item => thay bằng v-show nếu cần
6. Reuse logic với composables
Thay vì viết lại cùng một logic trong nhiều component, hãy tách thành composable function:
export function useCounter() { const count = ref(0) const increment = () => count.value++ return { count, increment }
}
Tái sử dụng giúp code nhẹ hơn, dễ test, dễ maintain.
7. Sử dụng build tool hợp lý
- Dùng Vite thay vì Webpack (nhanh hơn nhiều)
- Enable tree-shaking: Tránh import toàn bộ thư viện (như lodash, moment)
Ví dụ:
import debounce from 'lodash/debounce' // tốt
// import _ from 'lodash' // không tốt
8. Dùng Devtools để phân tích hiệu năng
Vue Devtools cung cấp tab "Performance", cho phép bạn:
- Theo dõi re-render
- Xem component nào gây bottleneck
- Xem thời gian mount, update của mỗi component
Tổng kết
Tối ưu hiệu năng không chỉ giúp app nhanh hơn, mà còn cải thiện trải nghiệm người dùng, tiết kiệm tài nguyên, và giảm chi phí server. Vue 3 đã rất tối ưu, nhưng với một số kỹ thuật hợp lý, bạn hoàn toàn có thể đưa ứng dụng của mình lên một tầm cao mới.
Bạn đã tối ưu phần nào trong ứng dụng Vue của mình rồi? Hãy chia sẻ thêm kinh nghiệm bên dưới nhé!