Giới thiệu về Reactivity trong Svelte

---

Ta đã đề cập đến những bước đầu tiên để bắt đầu với Svelte 3 , nhưng trong bài đăng đầu tiên đó, tôi đã cố tình bỏ qua để đi sâu hơn về một trong những tính năng giết người của Svelte: phản ứng.

Khả năng phản ứng đã trở thành cơn thịnh nộ trong vài năm qua đối với các khung giao diện user JavaScript hiện đại. Khả năng phản ứng nghĩa là các giá trị đã thay đổi sẽ tự động được phản ánh trong DOM.

Angular cho phép lập trình phản ứng nhờ RxJS và các vật có thể quan sát, và Vue.js cho phép tính toán lại các giá trị một cách phản ứng với các thuộc tính được tính toán . Đối với Svelte, nó sử dụng một tính năng JavaScript ít được biết đến hơn, các nhãn , để cho phép các khai báo phản ứng và các câu lệnh phản ứng. Điều này nghĩa là bạn có thể tự động tính lại một số giá trị nhất định khi một số giá trị khác thay đổi. Điều này thực sự mạnh mẽ và như bạn sẽ thấy, Svelte làm cho nó dễ dàng như chiếc bánh. 🥧

Thành phần bộ đếm từ

Hãy xem phản ứng trong Svelte trông như thế nào bằng cách xây dựng một ví dụ về bộ đếm ký tự / từ đơn giản.

Đây là thành phần xương sống của ta :

<script>
    let text = '';
</script>

<style>
  textarea {
    width: 100%;
    background: aliceblue;
    font-size: 2rem;
  }
</style>

<textarea bind:value={text} rows="10" />

Không có gì quá đặc biệt ở đây, ngoại trừ việc ràng buộc dữ liệu hai chiều giữa giá trị của text và giá trị của vùng văn bản.

Khai báo phản ứng

Bây giờ, hãy thêm một khai báo phản ứng để tự động tính số từ và ký tự khi giá trị của biến text thay đổi:

<script>
  let text = '';

  $: characters = text.length;
  $: words = text.split(' ').length;
</script>

<style>
  textarea {
    width: 100%;
    background: aliceblue;
    font-size: 2rem;
  }
</style>

<textarea bind:value={text} rows="10" />

<p>Character Count: {characters}</p>
<p>Word Count: {words}</p>

Ta đã khai báo hai biến mới: ký tự và từ , tính toán một giá trị dựa trên giá trị bên trong text và sẽ tự động được tính toán lại.

Phần $: là một nhãn và là JavaScript hoàn toàn hợp lệ. Rất có thể bạn chưa sử dụng nhãn trong JavaScript trước đây, chúng được sử dụng cho các trường hợp biên với những thứ như vòng lặp for lồng nhau. Svelte cung cấp cho các khai báo được gắn nhãn đó một ý nghĩa đặc biệt và tự động thiết bị khai báo cho phản ứng.

Tuyên bố phản ứng

Khả năng phản ứng sử dụng cú pháp nhãn đặc biệt này không chỉ hợp lệ để khai báo các biến mới mà còn được dùng để thực thi các câu lệnh một cách phản ứng khi một giá trị thay đổi.

Hãy ghi giá trị của text vào console khi nó thay đổi:

<script>
  let text = "";

  $: characters = text.length;
  $: words = text.split(" ").length;

  $: console.log("your text:", text);
</script>

<style>
  textarea {
    width: 100%;
    background: aliceblue;
    font-size: 2rem;
  }
</style>

<textarea bind:value={text} rows="10" />

<p>Character Count: {characters}</p>
<p>Word Count: {words}</p>

Hãy tưởng tượng điều này có thể hữu ích như thế nào để gỡ lỗi các ứng dụng!

Nhiều câu lệnh

Bạn có thể group nhiều câu lệnh với nhau trong một khối bằng cách sử dụng dấu ngoặc nhọn:

$: {
  console.log("---");
  console.log("your text:", text);
}

Câu điều kiện

Và bạn thậm chí có thể sử dụng các điều kiện làm câu lệnh của bạn :

$: if (text.toLowerCase().includes("see you later alligator")) {
  console.log("Not so soon baboon!");
  text = "";
}

Bây giờ mỗi khi biến text của ta có chứa chuỗi “gặp lại sau con cá sấu”, một thông báo sẽ được ghi vào console và ta đặt lại giá trị cho biến text .

🎩 Với điều này, bây giờ bạn có thể tiếp tục và làm cho các ứng dụng Svelte của bạn hoạt động!

---

---

Các tin liên quan