Vòng Đời Vue 3 (Lifecycle Hooks): Hướng Dẫn Đầy Đủ Cho Developer

Vòng Đời Vue 3 Là Gì?

Mỗi component trong Vue 3 đều trải qua một chu kỳ sống (lifecycle) — từ lúc được khởi tạo, gắn vào DOM, cập nhật dữ liệu, cho đến khi bị hủy. Vue cung cấp các lifecycle hooks — những hàm đặc biệt cho phép bạn "móc vào" từng giai đoạn đó để thực thi logic tùy chỉnh.

Hiểu rõ vòng đời Vue 3 giúp bạn viết code sạch hơn, tránh memory leak, và tối ưu hiệu năng ứng dụng đáng kể.

Sơ Đồ Vòng Đời Vue 3

setup()
  ↓
onBeforeMount()
  ↓
onMounted()         ← DOM sẵn sàng
  ↓
onBeforeUpdate()
  ↓
onUpdated()         ← DOM đã cập nhật
  ↓
onBeforeUnmount()
  ↓
onUnmounted()       ← Component bị hủy

Ngoài ra còn có các hook nâng cao: onErrorCaptured, onActivated, onDeactivated (dùng với <KeepAlive>).

Chi Tiết Từng Hook & Khi Nào Dùng

1. setup() — Điểm Khởi Đầu

import { ref } from 'vue'

const count = ref(0)

setup() chạy trước tất cả các hook khác, trước khi DOM được tạo. Đây là nơi bạn khai báo reactive state, computed, và các composables. Không truy cập được this ở đây.

Dùng khi: Khởi tạo state, inject dependencies, định nghĩa logic component.

2. onBeforeMount() — Trước Khi Gắn Vào DOM

import { onBeforeMount } from 'vue'

onBeforeMount(() => {
  console.log('Chuẩn bị render lần đầu...')
})

Template đã được compile nhưng chưa gắn vào DOM thực. Ít khi dùng trong thực tế.

Dùng khi: Thực hiện tác vụ đồng bộ cuối cùng trước khi render.

3. onMounted() — DOM Đã Sẵn Sàng ⭐

import { onMounted, ref } from 'vue'

const inputRef = ref(null)

onMounted(() => {
  inputRef.value?.focus()
  fetchData()
})

Đây là hook được dùng nhiều nhất. Lúc này DOM đã tồn tại, bạn có thể thao tác DOM trực tiếp hoặc gọi API.

Dùng khi: Gọi API, thao tác DOM, khởi tạo thư viện bên thứ ba (Chart.js, Google Maps…), focus input.

4. onBeforeUpdate() & onUpdated() — Khi Dữ Liệu Thay Đổi

import { onBeforeUpdate, onUpdated } from 'vue'

onBeforeUpdate(() => {
  // DOM cũ, data mới
})

onUpdated(() => {
  // DOM đã được cập nhật theo data mới
})

Dùng khi: Debug sự thay đổi DOM, đồng bộ thư viện UI sau khi Vue re-render. Tránh thay đổi state trong onUpdated vì có thể gây vòng lặp vô tận.

5. onBeforeUnmount() & onUnmounted() — Dọn Dẹp 

import { onBeforeUnmount, onUnmounted } from 'vue'

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize)
})

onUnmounted(() => {
  clearInterval(timer)
  chart.destroy()
})

Đây là bước cực kỳ quan trọng để tránh memory leak. Luôn dọn dẹp event listeners, timers, WebSocket connections, hay third-party instances.

Dùng khi: Hủy event listener, clear timer/interval, ngắt kết nối WebSocket, destroy thư viện bên ngoài.

6. onErrorCaptured() — Xử Lý Lỗi

import { onErrorCaptured } from 'vue'

onErrorCaptured((err, instance, info) => {
  logError(err)
  return false // Ngăn lỗi lan lên component cha
})

 Dùng khi: Xây dựng Error Boundary để bắt lỗi từ component con.

7. onActivated() & onDeactivated() — Với <KeepAlive>

import { onActivated, onDeactivated } from 'vue'

onActivated(() => {
  // Component được kích hoạt lại từ cache
  refreshData()
})

onDeactivated(() => {
  // Component bị ẩn nhưng không bị hủy
})

Dùng khi: Component được bọc trong <KeepAlive> — làm mới dữ liệu khi user quay lại trang.

Tổng Hợp: Hook Nào Dùng Cho Việc Gì?

Kết Luận

Nắm vững vòng đời Vue 3 là nền tảng để bạn viết ứng dụng ổn định, hiệu năng cao và không bị memory leak. Nguyên tắc vàng:

• onMounted — gọi API, thao tác DOM.
• onUnmounted — luôn dọn dẹp những gì bạn đã tạo.
• setup() — khởi tạo mọi thứ trước.

Hãy áp dụng đúng hook đúng chỗ, code của bạn sẽ gọn gàng và dễ maintain hơn rất nhiều!