Lifecycle hooks là các hàm đặc biệt mà Vue cung cấp, cho phép bạn can thiệp vào từng giai đoạn trong vòng đời của một component — từ khi nó được khởi tạo, render, mounted lên DOM, cho đến khi cập nhật hoặc bị huỷ bỏ. Điều này cho phép bạn thực hiện các tác vụ như gọi API, gắn listener, cleanup, đo hiệu suất hoặc đồng bộ hoá với bên ngoài (third-party libs, WebSocket, v.v.).
Trong Vue 3, hooks có thể được sử dụng ở cả Options API (như trong Vue 2) và Composition API. Ở Composition API, Vue cung cấp các hàm như onMounted, onUpdated, onBeforeUnmount...
Thứ tự như sau:
setup()
Hàm đầu tiên được gọi trong Composition API.
Chạy trước khi bất kỳ hook nào khác, kể cả created.
Dùng để khai báo reactive state, computed, methods, hoặc khởi tạo logic ban đầu.
Đây là nơi duy nhất bạn có quyền kiểm soát cả props và context (emit, attrs, slots) ngay từ đầu.
beforeCreate() (chỉ trong Options API)
Gọi trước khi data và reactive system được thiết lập.
Hiếm khi dùng trong Vue 3 do setup() đã thay thế vai trò chính.
