Svelte คืออะไร และเหตุใดจึงคอมไพล์
ทำความเข้าใจแนวทางที่ให้คอมไพเลอร์ของ Svelte เป็นศูนย์กลาง และความแตกต่างจาก React กับ Vue
Svelte คืออะไร และเหตุใดจึงคอมไพล์ เป็นบทเรียน Sveltejs Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Sveltejs Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
ยินดีต้อนรับสู่ Svelte
Svelte คือเฟรมเวิร์กส่วนติดต่อผู้ใช้ที่ เน้นคอมไพเลอร์เป็นหลัก ต่างจาก React หรือ Vue ตรงที่ Svelte ทำงานส่วนใหญ่ ระหว่างการสร้าง ไม่ใช่ขณะทำงาน
ไม่มี DOM เสมือน
React เปรียบเทียบความแตกต่างของ DOM เสมือนขณะทำงาน แต่ Svelte จะคอมไพล์คอมโพเนนต์ของคุณเป็น JavaScript แบบพื้นฐานที่ได้รับการปรับแต่งอย่างมีประสิทธิภาพสูง เพื่ออัปเดต DOM โดยตรง
ส่งโค้ดน้อยลง
เนื่องจาก Svelte ส่งผลลัพธ์ที่คอมไพล์แล้ว โดยทั่วไปคุณจึงส่ง JavaScript น้อยลง ไปยังเบราว์เซอร์ ขนาดชุดรวมไฟล์จึงเล็กมาก
รูปแบบไฟล์คอมโพเนนต์
คอมโพเนนต์ Svelte จะอยู่ในไฟล์ .svelte ซึ่งประกอบด้วยส่วนที่ไม่จำเป็นต้องมีสามส่วน ได้แก่ สคริปต์ มาร์กอัป และสไตล์
<script>
let name = "world";
</script>
<h1>Hello {name}!</h1>รีแอกทีฟด้วยการกำหนดค่า
ใน Svelte การกำหนดค่าใหม่ให้ตัวแปรจะทำให้ส่วนติดต่อผู้ใช้อัปเดตทันที ไม่จำเป็นต้องเรียก setState
<script>
let count = 0;
function inc() { count = count + 1; }
</script>
<button on:click={inc}>{count}</button>คอมโพเนนต์ไฟล์เดียว
มาร์กอัป ตรรกะ และสไตล์ที่มีขอบเขตอยู่ร่วมกันในไฟล์เดียว การวางทุกอย่างไว้ด้วยกันทำให้ทำความเข้าใจและปรับโครงสร้างคอมโพเนนต์ได้ง่าย
สไตล์มีขอบเขตโดยค่าเริ่มต้น
<style> ใด ๆ ที่คุณเขียนจะมีขอบเขตเฉพาะภายในคอมโพเนนต์นั้นเท่านั้น ไม่ต้องกังวลเรื่อง CSS ขัดแย้งกันระหว่างหน้าอีกต่อไป
<style>
p { color: tomato; }
</style>
<p>I am tomato</p>ประสิทธิภาพที่เหนือกว่า
เนื่องจากไม่มีค่าใช้จ่ายส่วนเกินของเฟรมเวิร์กขณะทำงาน แอป Svelte จึงมักทำงานได้เร็วกว่าแอป React หรือ Vue ที่เทียบเท่ากันบนอุปกรณ์ประสิทธิภาพต่ำ
SvelteKit เมตาเฟรมเวิร์ก
SvelteKit สร้างต่อยอดจาก Svelte และเพิ่มการกำหนดเส้นทาง SSR และการโหลดข้อมูล แอป Svelte ที่ใช้งานจริงส่วนใหญ่ใช้ SvelteKit
เมื่อ Svelte โดดเด่น
Svelte เหมาะอย่างยิ่งสำหรับเว็บไซต์การตลาด แดชบอร์ด แอปที่เหมาะกับอุปกรณ์เคลื่อนที่ และทุกที่ที่ขนาดชุดรวมไฟล์กับ DX มีความสำคัญ
สรุปการเปรียบเทียบ
React, Vue และ Angular ล้วนส่งเฟรมเวิร์กขณะทำงานไปด้วย ส่วน Svelte จะคอมไพล์ส่วนนี้ออกไป ผลลัพธ์คือชุดรวมไฟล์ที่เล็กลงและรูปแบบการทำความเข้าใจที่เรียบง่ายขึ้น
ตรวจสอบความเข้าใจ
ทดสอบความเข้าใจของคุณ
ทบทวน
ตอนนี้คุณทราบแล้วว่า Svelte คอมไพล์คอมโพเนนต์ ส่ง JS น้อยลง ใช้สไตล์ที่มีขอบเขต และเป็นพื้นฐานของ SvelteKit สำหรับแอปเต็มรูปแบบ ขั้นต่อไป: สร้างโปรเจกต์แรกของคุณ
เรียนรู้ HTML ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 41
- บทเรียน
- 163
คำถามที่พบบ่อย
บทเรียน “Svelte คืออะไร และเหตุใดจึงคอมไพล์” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “Svelte คืออะไร และเหตุใดจึงคอมไพล์” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Sveltejs Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “Svelte คืออะไร และเหตุใดจึงคอมไพล์”
ทำความเข้าใจแนวทางที่ให้คอมไพเลอร์ของ Svelte เป็นศูนย์กลาง และความแตกต่างจาก React กับ Vue คุณปฏิบัติ Sveltejs Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Sveltejs Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Sveltejs Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “Svelte คืออะไร และเหตุใดจึงคอมไพล์” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Sveltejs Academy นี้ได้ไหม
ได้ บทเรียน Sveltejs Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- Svelte คืออะไร และเหตุใดจึงคอมไพล์
- การสร้างโครงการด้วย npm create svelte
- โครงสร้างโครงการ: src routes static
- เซิร์ฟเวอร์พัฒนาและการแทนที่โมดูลแบบฉับไว