Lifecycle hook cho phép bạn chạy code tại những thời điểm cụ thể trong vòng đời của một component — tạo, gắn vào DOM, cập nhật, và gỡ bỏ. Trong Composition API chúng là các hàm bạn gọi bên trong setup.
Các hook chính theo thứ tự
vue
<script setup>
import { onMounted, onUpdated, onUnmounted, ref } from "vue";
const data = ref(null);
onMounted(() => {
// component giờ đã ở trong DOM — fetch dữ liệu, truy cập phần tử, khởi tạo thư viện
fetchData().then(d => (data.value = d));
});
onUpdated(() => {
// chạy sau khi DOM render lại do một thay đổi reactive
});
onUnmounted(() => {
// component đang bị gỡ bỏ — DỌN DẸP ở đây
clearInterval(timer);
window.removeEventListener("resize", handler);
});
</script>