Vue 3 mang đến một mô hình component hiện đại và linh hoạt, cùng với đó là lifecycle hooks – những điểm móc giúp bạn "chen vào" các giai đoạn khác nhau trong vòng đời của một component. Việc hiểu rõ khi nào nên dùng hook nào sẽ giúp bạn xây dựng ứng dụng hiệu quả, dễ bảo trì và tránh lỗi phát sinh.
1. Tổng quan về Lifecycle Hooks trong Vue 3
Mỗi component Vue đi qua một vòng đời bao gồm nhiều giai đoạn, từ khi được tạo ra đến khi bị huỷ bỏ. Vue 3 cung cấp các lifecycle hook dưới dạng hàm (composition API), giúp bạn dễ dàng chèn logic xử lý tại từng thời điểm cụ thể.
Dưới đây là một sơ đồ các giai đoạn chính:
2. Các lifecycle hooks phổ biến và khi nào nên dùng
2.1 BeforeCreate
- Thời điểm: Trước khi instance component được tạo.
- Truy cập được gì? data, props, methods đều chưa có.
- Dùng để: Ghi log, kiểm tra điều kiện cực sớm.
beforeCreate() { console.log('beforeCreate: chưa thể truy cập data hay props');
} 2.2 Created
- Thời điểm: Sau khi component instance đã được tạo xong.
- Truy cập được gì? Có thể truy cập data, props, methods.
- Dùng để: Gọi API, khởi tạo giá trị, set timer.
created() { console.log('created: có thể truy cập this.message =', this.message);
}
2.3 BeforeMount
- Thời điểm: Sau khi render lần đầu xong (template đã được tạo), nhưng chưa gắn vào DOM.
- Dùng để: Thực hiện bước chuẩn bị trước khi hiển thị thực tế.
beforeMount() { console.log('beforeMount: chuẩn bị gắn DOM');
}
2.4 Mounted
- Thời điểm: Sau khi component đã render hoàn chỉnh vào DOM.
- Dùng để: Gọi API, thao tác DOM, khởi tạo thư viện (chart, map...).
mounted() { console.log('mounted: DOM đã sẵn sàng'); this.fetchData();
} 2.5 BeforeUpdate
- Thời điểm: Khi dữ liệu thay đổi, trước khi re-render.
- Dùng để: So sánh giá trị cũ/mới hoặc log tracking.
beforeUpdate() { console.log('beforeUpdate: data sắp thay đổi');
}
2.6 Updated
- Thời điểm: Sau khi component đã re-render do data thay đổi.
- Dùng để: Cập nhật UI, DOM, hoặc trigger animation.
updated() { console.log('updated: component đã cập nhật xong');
}
2.7 BeforeUnmount
- Thời điểm: Ngay trước khi component bị tháo khỏi DOM.
- Dùng để: Dọn dẹp – huỷ timer, remove event listener.
beforeUnmount() { console.log('beforeUnmount: chuẩn bị gỡ bỏ component'); clearInterval(this.timer);
}
2.8 Unmounted
- Thời điểm: Sau khi component đã bị loại khỏi DOM.
- Dùng để: Final cleanup.
unmounted() { console.log('unmounted: component đã bị huỷ');
}
3. Ví dụ tổng hợp cho một vòng đời lifecycle
<template> <div> <h2>{{ message }}</h2> <button @click="message = 'Đã cập nhật!'">Cập nhật</button> </div>
</template> <script>
export default { data() { return { message: 'Hello Vue 3!', timer: null } }, beforeCreate() { console.log('beforeCreate'); }, created() { console.log('created'); }, beforeMount() { console.log('beforeMount'); }, mounted() { console.log('mounted'); this.timer = setInterval(() => { console.log('Đang hoạt động...'); }, 2000); }, beforeUpdate() { console.log('beforeUpdate'); }, updated() { console.log('updated'); }, beforeUnmount() { console.log('beforeUnmount'); clearInterval(this.timer); }, unmounted() { console.log('unmounted'); }
}
</script> Tóm tắt giúp bạn ghi nhớ nhanh:
4. Tổng kết.
Nắm rõ vòng đời component trong Vue 3 giúp bạn xây dựng ứng dụng rõ ràng, hiệu quả và dễ bảo trì. Việc chọn đúng lifecycle hook để đặt logic sẽ giúp code ngắn gọn, dễ hiểu và tránh các lỗi không mong muốn
Link tham khảo: