Ref trong Vue.js – Truy xuất DOM và component

Rref trong vuejs là một hàm giúp bạn tạo ra các biến reactive – tức là giá trị của biến có thể phản ứng lại khi thay đổi. Tuy nhiên, ref không chỉ dùng cho dữ liệu – Vue còn cung cấp một khái niệm quan trọng khác: Template Refs, cho phép bạn truy xuất đến DOM hoặc component con trong template.

Template Refs trong Vue.js

Template ref là gì?

Template refs là cách để bạn lấy tham chiếu đến DOM element hoặc component con trong template bằng ref="".

Cách dùng:

<template>
  <input ref="inputRef" />
</template>

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

const inputRef = ref(null);

onMounted(() => {
  // Truy cập phần tử DOM thực tế
  inputRef.value.focus();
});
</script>

Ứng dụng thường gặp

• Focus vào input khi component mount.
• Kích hoạt phương thức từ component con.
• Kéo thả, scroll, đo kích thước DOM, hoặc tích hợp thư viện bên ngoài (Swiper, ChartJS, …)

Refs trong v-for

Vấn đề gặp phải

Khi bạn render nhiều phần tử bằng v-for, mỗi phần tử cần một ref khác nhau. Vue không tự tách ref thành mảng nếu bạn dùng chuỗi. Vì vậy, bạn cần dùng ref dạng hàm để lưu trữ nhiều DOM element hoặc component.

Ví dụ:

<template>
  <div v-for="(item, index) in list" :key="index" :ref="setRefs">
    {{ item }}
  </div>
</template>

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

const list = ['Vue', 'React', 'Angular'];
const itemRefs = ref([]);

const setRefs = (el) => {
  if (el && !itemRefs.value.includes(el)) {
    itemRefs.value.push(el);
  }
};
</script>

Lưu ý:

• itemRefs là một mảng chứa tất cả các DOM element tương ứng với từng item.
• Bạn có thể dùng itemRefs.value[i] để lấy từng element và áp dụng logic (ví dụ: scroll đến phần tử, đo kích thước…).

Refs kiểu hàm (Function Refs) trong Vue 3

Vue cho phép bạn truyền một hàm vào ref để xử lý trực tiếp DOM element. Đây là cách linh hoạt để xử lý logic tùy chỉnh khi mount DOM.

Ví dụ:

<template>
  <div :ref="el => el && console.log('Element đã mount:', el)">Hello</div>
</template>

Khi nào nên dùng?

• Khi bạn không cần lưu lại element, chỉ muốn xử lý logic tại thời điểm mount.
• Khi bạn muốn kết hợp xử lý DOM với logic bên ngoài, như tính toán layout, thêm class, tương tác thư viện ngoài.

Tips sử dụng Template Refs hiệu quả

1. Không dùng ref để thay thế reactive logic – chỉ nên dùng để truy xuất DOM khi thật cần thiết.
2. ref chỉ có giá trị trong onMounted() trở đi – đừng truy cập sớm hơn.
3. Trong project thực tế, hãy dọn dẹp ref array nếu bạn dùng với v-for để tránh trùng lặp hoặc memory leak.

Tổng kết

• ref là công cụ quan trọng trong Vue giúp bạn truy cập phần tử DOM hoặc component con.
• Có 3 cách sử dụng phổ biến:
  • ref="myRef" để truy xuất DOM.
  • ref trong v-for cần xử lý thủ công.
  • ref kiểu hàm giúp xử lý logic động linh hoạt hơn.
• Biết cách dùng ref giúp bạn xây dựng những component tương tác mạnh mẽ hơn, đặc biệt khi tích hợp các thư viện bên thứ ba hoặc cần điều khiển trực tiếp DOM.