ตัวแปรตอบสนองด้วย let
ประกาศสถานะตอบสนองใน Svelte โดยใช้การประกาศ let แบบปกติ
ตัวแปรตอบสนองด้วย let เป็นบทเรียน Sveltejs Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Sveltejs Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
ไม่มี API พิเศษ
ใน Svelte การประกาศ let ทั่วไปในบล็อกสคริปต์จะเป็นรีแอกทีฟ ไม่มีกลไกที่เทียบเท่ากับ useState
ประกาศและใช้งาน
ประกาศตัวแปรแล้วแทรกค่าลงในมาร์กอัป เมื่ออัปเดตตัวแปร ส่วนที่ขึ้นอยู่กับตัวแปรนั้นจะเรนเดอร์ใหม่
<script>
let count = 0;
</script>
<p>The count is {count}</p>อัปเดตด้วยการกำหนดค่า
การกำหนดค่าคือสิ่งที่กระตุ้นการอัปเดต count = count + 1 บอก Svelte ว่าค่าเปลี่ยนแปลงแล้ว
function inc() { count = count + 1; }รูปแบบย่อสำหรับการเพิ่มค่า
รูปแบบย่อมาตรฐานของ JS ก็ใช้ได้เช่นกัน: count++, count += 5 และอื่น ๆ
function inc() { count++; }อาร์เรย์และการเปลี่ยนแปลงค่า
การเปลี่ยนแปลงอาร์เรย์ผ่าน push จะไม่ทำให้เกิดรีแอกทีฟ คุณต้องกำหนดค่าให้ตัวแปรใหม่
items = [...items, newItem]; // ok
items.push(newItem); // does not updateออบเจ็กต์และการเปลี่ยนแปลงค่า
กฎเดียวกันนี้ใช้กับออบเจ็กต์ด้วย ให้แทนที่การอ้างอิง หรือกำหนดค่าให้คุณสมบัติเฉพาะและออบเจ็กต์แม่ใหม่
user.name = "Bea";
user = user; // tell Svelte it changedเหตุผลที่การกำหนดค่ามีความสำคัญ
คอมไพเลอร์ Svelte จะเพิ่มการติดตามให้ตัวดำเนินการกำหนดค่า การเรียกเมธอดอย่าง push จึงมองไม่เห็นสำหรับคอมไพเลอร์
เฉพาะที่กับใช้ร่วมกัน
let ธรรมดาจะสร้างสถานะที่เป็นของอินสแตนซ์คอมโพเนนต์เดียว หากต้องการใช้ร่วมกันระหว่างคอมโพเนนต์ ให้ใช้ props หรือ stores
ค่าเริ่มต้น
ด้านขวาของการประกาศ let จะทำงานหนึ่งครั้งเมื่อเริ่มต้นอินสแตนซ์คอมโพเนนต์
การระบุชนิดข้อมูล
เมื่อใช้ lang="ts" ให้ระบุชนิดข้อมูลของตัวแปรอย่างชัดเจน
<script lang="ts">
let count: number = 0;
</script>หลายตัวแปร
คุณสามารถประกาศตัวแปรแบบรีแอกทีฟได้มากเท่าที่ต้องการ ทั้งในบรรทัดเดียวหรือหลายบรรทัด
let x = 0, y = 0;
let items = [];ตรวจสอบความเข้าใจ
อะไรเป็นตัวกระตุ้นให้เกิดรีแอกทีฟ
ทบทวน
let ธรรมดาเป็นรีแอกทีฟ ให้กำหนดค่าใหม่ (อย่าเปลี่ยนแปลงค่าเดิม) เพื่อกระตุ้นการอัปเดต อาร์เรย์และออบเจ็กต์ต้องเปลี่ยนการอ้างอิง
คำถามที่พบบ่อย
บทเรียน “ตัวแปรตอบสนองด้วย let” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ตัวแปรตอบสนองด้วย let” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Sveltejs Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ตัวแปรตอบสนองด้วย let”
ประกาศสถานะตอบสนองใน Svelte โดยใช้การประกาศ let แบบปกติ คุณปฏิบัติ Sveltejs Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Sveltejs Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Sveltejs Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “ตัวแปรตอบสนองด้วย let” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Sveltejs Academy นี้ได้ไหม
ได้ บทเรียน Sveltejs Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- โครงสร้างของแม่แบบ script style
- ตัวแปรตอบสนองด้วย let
- การแทรกค่า: {expression}
- ค่าที่คำนวณ: การประกาศตอบสนอง $: