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.
Bạn sẽ học đượ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
Thuật ngữ cần biết
- 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.
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 |
Tình huống: Chọn framework cho đồ án
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.
Mẹo hay
Thử nhanh trên sandbox trực tuyến như play.vuejs.org, svelte.dev/playground mà không cần cài đặt.
Lưu ý
Đừng đổi framework giữa dự án chỉ vì thấy cái mới đang nổi.
Thực hành
- 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.
Tóm tắt bài học
- 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.