Vue.js – Tìm hiểu cách hoạt động của Component

Vue.js là một framework JavaScript nhẹ, nhanh, và linh hoạt để xây dựng giao diện người dùng. Được tạo ra bởi Evan You và ra mắt lần đầu vào năm 2014, Vue hướng tới việc đơn giản hóa quá trình phát triển ứng dụng web bằng cách tập trung vào View Layer.

Giới thiệu tổng quan về Vue.js

Một số điểm nổi bật của Vue.js:

• Reactive & Declarative: Vue sử dụng hệ thống phản ứng dữ liệu để tự động cập nhật giao diện khi dữ liệu thay đổi.
• Dễ học – dễ dùng: Với cú pháp gần gũi HTML, CSS, JS, bạn có thể bắt đầu với Vue trong vài giờ.
• Hệ sinh thái linh hoạt: Vue có thể mở rộng với Vue Router, Pinia (hoặc Vuex), NuxtJS, VueUse, tạo nên các SPA (Single Page App) mạnh mẽ.
• Composition API (Vue 3): Cho phép tách logic dễ dàng, tái sử dụng code hiệu quả hơn.

DOM ảo là gì?

Một trong những yếu tố làm nên sức mạnh của Vue (và React) chính là Virtual DOM (DOM ảo).

DOM truyền thống:

Khi cập nhật dữ liệu trong DOM thật, trình duyệt sẽ phải tính toán lại lại layout, reflow, repaint… khiến hiệu năng giảm nếu số lượng thao tác nhiều.

DOM ảo (Virtual DOM):

Vue tạo ra bản sao DOM nhẹ trong bộ nhớ. Khi có thay đổi, Vue:

1. Tạo lại Virtual DOM mới.
2. So sánh với bản cũ (diffing).
3. Chỉ cập nhật phần thay đổi thực sự trên DOM thật (patching).

→ Điều này giúp tăng hiệu suất rõ rệt khi so với thao tác trực tiếp trên DOM.

Tổng quan vòng đời (Lifecycle) của một Component Vue

Trong Vue 3, khi một component được tạo, gắn vào DOM, cập nhật, và bị hủy – Vue sẽ kích hoạt một chuỗi các hook gọi là Lifecycle Hooks.

Các hook này giúp bạn xử lý các tác vụ như gọi API, đăng ký event, dọn dẹp interval, v.v.

onMounted và onUnmounted – Bắt đầu và kết thúc vòng đời

Hai hook này thường được dùng nhất khi thao tác với DOM hoặc tích hợp thư viện bên ngoài (charts, maps…).

<script setup>
import { onMounted, onUnmounted } from 'vue';

let interval;

onMounted(() => {
  console.log('Component được mount');
  interval = setInterval(() => {
    console.log('Tick...');
  }, 1000);
});

onUnmounted(() => {
  clearInterval(interval);
  console.log('Component đã bị unmount');
});
</script>

Ghi nhớ:

• onMounted() = DOM đã render xong → truy cập DOM an toàn.
• onUnmounted() = Hủy bỏ component → nên dọn dẹp tài nguyên tránh rò rỉ bộ nhớ.

onBeforeUpdate và onUpdated – Khi dữ liệu thay đổi

Dùng để theo dõi quá trình cập nhật DOM sau khi dữ liệu thay đổi.

<script setup>
import { ref, onBeforeUpdate, onUpdated } from 'vue';

const count = ref(0);

onBeforeUpdate(() => {
  console.log('DOM chuẩn bị cập nhật');
});

onUpdated(() => {
  console.log('DOM đã cập nhật');
});
</script>

<template>
  <button @click="count++">Count: {{ count }}</button>
</template>

Use case thực tế:

• So sánh trước/sau khi cập nhật DOM.
• Đồng bộ trạng thái bên ngoài (ví dụ: thư viện animation, resize, third-party UI updates…).

Tổng kết

Vue.js là một framework tuyệt vời, dễ học, phù hợp cho cả người mới và dự án quy mô lớn. Việc nắm vững vòng đời của component giúp bạn kiểm soát tốt hơn quá trình khởi tạo, cập nhật và hủy component.

Gợi ý:

• Khi thao tác với DOM: dùng onMounted()
• Khi cleanup resource: dùng onUnmounted()
• Khi tracking cập nhật: dùng onBeforeUpdate() và onUpdated()