Login

Vue 3 cho người mới: Composition API, ref và reactive

  • author-image

    Nguyễn Đình Cường

  • blog-tag
  • blog-comment 0 comment
  • created-date 09 Nov, 2026
blog-thumbnail

Vue là framework JavaScript được nhiều lập trình viên yêu thích vì dễ tiếp cận: mã gần với HTML quen thuộc, tài liệu rõ ràng và có thể dùng dần từ một trang nhỏ đến ứng dụng lớn. Bài này giới thiệu Vue 3 với cú pháp Composition API và script setup mà tài liệu chính thức khuyến khích dùng.

Khởi tạo dự án

npm create vue@latest
cd ten-du-an
npm install
npm run dev

Công cụ sẽ hỏi bạn một vài lựa chọn như TypeScript, router. Với người mới, bạn có thể bỏ qua hầu hết. Một thành phần Vue nằm trong file .vue gọi là Single File Component (SFC), gồm ba khối.

Cấu trúc một file .vue

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

const dem = ref(0);
function tang() {
  dem.value++;
}
</script>

<template>
  <button @click='tang'>Bạn đã bấm {{ dem }} lần</button>
</template>

<style scoped>
button {
  padding: 8px 16px;
}
</style>
  • script setup: logic của component. Biến và hàm khai báo ở đây dùng được trực tiếp trong template.
  • template: phần HTML, dùng cú pháp đặc biệt của Vue.
  • style scoped: CSS chỉ áp dụng cho component này.

ref: dữ liệu phản ứng cho giá trị đơn

ref bọc một giá trị để Vue theo dõi thay đổi. Trong script, bạn đọc và ghi qua .value; trong template, Vue tự mở bọc nên không cần .value:

const ten = ref('Lan');
const tuoi = ref(22);
ten.value = 'Mai';          // trong script cần .value

Khi dem.value đổi, giao diện tự cập nhật. Đây chính là tính phản ứng (reactivity): bạn thay đổi dữ liệu và Vue lo phần vẽ lại.

reactive: dành cho object

import { reactive } from 'vue';

const form = reactive({ ten: '', email: '' });
form.ten = 'Nam';   // không cần .value

Cả hai đều dùng được cho object. Lời khuyên phổ biến: dùng ref làm mặc định cho mọi loại dữ liệu để nhất quán. Hạn chế của reactive là không thay thế được cả object bằng phép gán mới mà vẫn giữ tính phản ứng, và khi destructuring thuộc tính ra ngoài bạn sẽ mất liên kết.

Cú pháp template thường dùng

  • {{ bieuThuc }}: chèn giá trị vào văn bản.
  • v-bind:src hoặc viết tắt :src: gắn dữ liệu vào thuộc tính.
  • v-on:click hoặc viết tắt @click: lắng nghe sự kiện.
  • v-model: liên kết hai chiều với ô nhập.
  • v-if, v-else, v-show: hiển thị có điều kiện.
  • v-for: lặp danh sách, kèm :key.
<script setup>
import { ref } from 'vue';
const ten = ref('');
const ds = ref([{ id: 1, ten: 'HTML' }, { id: 2, ten: 'CSS' }]);
</script>

<template>
  <input v-model='ten' placeholder='Nhập tên' />
  <p v-if='ten'>Xin chào, {{ ten }}!</p>
  <p v-else>Hãy nhập tên của bạn</p>

  <ul>
    <li v-for='k in ds' :key='k.id'>{{ k.ten }}</li>
  </ul>
</template>

v-model rút gọn đáng kể so với việc tự viết cả value lẫn xử lý sự kiện như trong React. Đây là một điểm khiến nhiều người thấy Vue "dễ chịu".

Vue và React: khác biệt tư duy

Hai thư viện đều dựa trên component và tính phản ứng, nhưng cách tiếp cận khác nhau:

  • Vue dùng template gần HTML và hệ thống phản ứng tự theo dõi phụ thuộc; bạn chỉ việc thay đổi dữ liệu.
  • React dùng JSX và bạn tự chú ý đến việc tạo bản sao mới của state, cùng quy tắc hook.
  • Vue có bộ công cụ chính thức đi kèm như Vue Router và Pinia; React để cộng đồng chọn nhiều hơn.

Không có bên nào đúng tuyệt đối. Hãy chọn theo dự án, đội nhóm, và quan trọng là thị trường việc làm bạn nhắm tới. Kiến thức nền tảng về JavaScript, component và quản lý state mang sang được cả hai.

Ví dụ: ứng dụng ghi chú nhỏ

Ghép những gì đã học thành ứng dụng ghi chú rất gọn:

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

const noiDung = ref('');
const ghiChu = ref([]);

function them() {
  if (!noiDung.value.trim()) return;
  ghiChu.value.push({ id: Date.now(), text: noiDung.value });
  noiDung.value = '';
}
</script>

<template>
  <form @submit.prevent='them'>
    <input v-model='noiDung' placeholder='Ghi chú mới' />
    <button>Thêm</button>
  </form>
  <ul>
    <li v-for='g in ghiChu' :key='g.id'>{{ g.text }}</li>
  </ul>
</template>

Hãy để ý @submit.prevent: modifier .prevent gọi preventDefault() giúp bạn. Và với mảng phản ứng, push hoạt động trực tiếp, không cần tạo bản sao như trong React vì Vue theo dõi được thay đổi tại chỗ.

Kết luận

Với Vue 3 bạn cần nhớ: file SFC gồm script setup, template, style; ref với .value trong script; các directive v-if, v-for, v-model, @click. Chỉ vậy là đủ để dựng những giao diện tương tác đầu tiên.

Khi sẵn sàng đi tiếp tới props, emit và router, hãy xem thêm các khóa học trên codebem.com để có lộ trình rõ ràng.

author_photo
Nguyễn Đình Cường

0 comment