Bài 5. Vue và Svelte lướt nhanh

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.

Đ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