Cùng một ứng dụng đếm số viết bằng Vue và Svelte. Nhìn so sánh để thấy các khái niệm giống nhau, chỉ cú pháp khác.
- Đọc hiểu mã Vue 3 và Svelte
- Nhận ra khái niệm chung: component, state, sự kiện, danh sách
- Biết điểm mạnh riêng của từng framework
- Quyết định có học thêm hay không
- Reactive
- Dữ liệu thay đổi thì giao diện tự cập nhật.
- SFC
- Single File Component: một tệp gồm cả mẫu, mã, kiểu dáng.
- Compiler
- Svelte biên dịch trước, ít mã chạy ở trình duyệt.
Khái niệm và lý thuyết
Ba framework phổ biến chia sẻ cùng ý tưởng phản ứng (reactivity): dữ liệu đổi thì giao diện tự đổi, nhưng thực hiện khác nhau. React vẽ lại cả hàm component rồi so sánh với phiên bản trước bằng DOM ảo. Vue theo dõi chính xác dữ liệu nào được dùng ở đâu bằng proxy và chỉ cập nhật phần liên quan. Svelte biên dịch trước thành mã cập nhật DOM trực tiếp nên không cần runtime lớn.
| React | Vue | Svelte | |
|---|---|---|---|
| Mô hình | JSX trong JavaScript | Template HTML + JS | Template HTML + JS biên dịch |
| Khuyến nghị cho | Hệ sinh thái, việc làm | Học dễ, tài liệu tốt | Mã gọn, hiệu năng |
| Meta-framework | Next.js | Nuxt | SvelteKit |
Điểm chung giúp bạn chuyển đổi dễ: component, props (truyền xuống), sự kiện (báo lên), trạng thái và vòng đời. Học kỹ tư duy này một lần, mỗi framework mới chỉ là học cú pháp.
Vue 3
<script setup>
import { ref, computed } from "vue";
const ds = ref(["Python", "Vue"]);
const moi = ref("");
const dem = computed(() => ds.value.length);
function them() {
if (moi.value) { ds.value.push(moi.value); moi.value = ""; }
}
</script>
<template>
<input v-model="moi" @keyup.enter="them" />
<button @click="them">Thêm</button>
<p>Có {{ dem }} khóa</p>
<ul><li v-for="k in ds" :key="k">{{ k }}</li></ul>
</template>Svelte
<script>
let ds = ["Python", "Svelte"];
let moi = "";
$: dem = ds.length;
function them() {
if (moi) { ds = [...ds, moi]; moi = ""; }
}
</script>
<input bind:value={moi} on:keyup={e => e.key === "Enter" && them()} />
<button on:click={them}>Thêm</button>
<p>Có {dem} khóa</p>
<ul>{#each ds as k}<li>{k}</li>{/each}</ul>So sánh nhanh
| React | Vue | Svelte | |
|---|---|---|---|
| Cách khai báo state | useState | ref() | biến thường |
| Hiển thị danh sách | map() | v-for | #each |
| Gắn ô nhập | value + onChange | v-model | bind:value |
| Điểm mạnh | Hệ sinh thái | Dễ học | Gọn, nhanh |
Nhóm 3 sinh viên làm hệ thống quản lý thư viện trong 6 tuần. Họ chọn Vue vì tài liệu tiếng Anh dễ đọc, cú pháp gần HTML, cả nhóm thạo nhanh.
Thử nhanh trên sandbox trực tuyến như play.vuejs.org, svelte.dev/playground mà không cần cài đặt.
Đừng đổi framework giữa dự án chỉ vì thấy cái mới đang nổi.
- Chạy ví dụ Vue ở play.vuejs.org.
- Chạy ví dụ Svelte ở svelte.dev/playground.
- Viết lại bộ đếm ở bài trước bằng một trong hai framework.
- Mọi framework: component + state + sự kiện + danh sách.
- Vue dễ học, Svelte gọn và nhanh.
- Chọn theo mục tiêu và nhóm làm việc.