Vue Academy · บทเรียน

โหมด Vue Vapor: การเพิ่มประสิทธิภาพระหว่างคอมไพล์

โหมด Vapor ลบ DOM เสมือนออก ความหมายต่อประสิทธิภาพ และการคอมไพล์แบบเลือกเปิดใช้

โหมด Vue Vapor: การเพิ่มประสิทธิภาพระหว่างคอมไพล์ เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

Vapor Mode คืออะไร

Vapor Mode เป็นกลยุทธ์การคอมไพล์ทางเลือกของ Vue ที่ ลบ DOM เสมือนออกทั้งหมด แทนที่จะเปรียบเทียบความแตกต่างระหว่างต้นไม้ VNode คอมไพเลอร์จะสร้างโค้ดที่อัปเดตโหนด DOM จริงโดยตรง ฟีเจอร์นี้ต้องเปิดใช้โดยสมัครใจ และมุ่งเพิ่มประสิทธิภาพพร้อมลดการใช้หน่วยความจำอย่างมาก

DOM เสมือนทำงานในปัจจุบันอย่างไร

โดยปกติ ฟังก์ชันเรนเดอร์จะส่งคืนต้นไม้ของ VNode ในการอัปเดตแต่ละครั้ง Vue จะสร้างต้นไม้ใหม่แล้วเปรียบเทียบกับต้นไม้เดิมเพื่อค้นหาการเปลี่ยนแปลง การเปรียบเทียบนี้มีต้นทุนขณะทำงานและจัดสรรออบเจ็กต์ใหม่ทุกครั้งที่เรนเดอร์

// conceptually, each render produces VNodes
function render() {
  return h('div', null, [
    h('span', null, count.value)
  ])
}
// Vue diffs new VNodes vs old to patch the DOM

Vapor: การอัปเดต DOM โดยตรง

ใน Vapor Mode คอมไพเลอร์จะวิเคราะห์เทมเพลตใน เวลาคอมไพล์ และสร้างโค้ดที่แตะเฉพาะโหนด DOM ที่อาจเปลี่ยนแปลงเท่านั้น ไม่มีต้นไม้ VNode และไม่มีการเปรียบเทียบความแตกต่าง แต่เอฟเฟกต์แบบรีแอกทีฟจะเขียนค่าลงในโหนดโดยตรง

// conceptual Vapor output
const n0 = document.createElement('span')
// effect updates ONLY the text node when count changes
renderEffect(() => {
  n0.textContent = count.value
})

ระบบรีแอกทีฟแบบเดิม

Vapor ยังคงใช้ระบบ รีแอกทีฟ ที่คุ้นเคยของ Vue โดย ref, reactive, computed และ watch ยังคงทำงานเหมือนเดิม สิ่งที่เปลี่ยนคือวิธีนำการอัปเดต DOM ไปใช้ ไม่ใช่วิธีประกาศสถานะรีแอกทีฟ

import { ref, computed } from 'vue'

const count = ref(0)
const doubled = computed(() => count.value * 2)
// identical authoring experience under Vapor

เลือกใช้เป็นรายคอมโพเนนต์

Vapor เปิดใช้เป็นรายคอมโพเนนต์ ไม่ได้เปิดใช้ทั่วทั้งแอป วิธีนี้ช่วยให้คุณทยอยย้ายระบบได้ และใช้คอมโพเนนต์แบบ vapor กับคอมโพเนนต์ทั่วไปในแอปเดียวกันได้ ธรรมเนียมที่พบบ่อยคือใช้เครื่องหมายกำกับใน <script setup> หรือการกำหนดค่าการสร้าง

<script setup vapor>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button @click="count++">{{ count }}</button>
</template>

เหตุผลที่ทำงานเร็วขึ้น

Vapor ข้ามการสร้าง VNode และการตรวจหาความแตกต่าง จึงลดงานที่ CPU ต้องทำในการอัปเดตแต่ละครั้ง และสร้างออบเจ็กต์น้อยลงมาก ช่วยลดภาระของการเก็บคืนหน่วยความจำ การเมานต์ครั้งแรกยังมีค่าใช้จ่ายของรันไทม์น้อยลง ทำให้ใช้หน่วยความจำน้อยลงด้วย

รันไทม์มีขนาดเล็กลง

เนื่องจากคอมโพเนนต์แบบ vapor ไม่จำเป็นต้องใช้รันไทม์ของ DOM เสมือน แอปที่สร้างด้วย Vapor ทั้งหมดจึงสามารถส่งบันเดิล รันไทม์ที่มีขนาดเล็กลง ได้ กลไกการตรวจหาความแตกต่างจะไม่ถูกรวมเข้ามาเลย

การวิเคราะห์ขณะคอมไพล์

จุดเด่นอยู่ที่คอมไพเลอร์สามารถแยกส่วน คงที่ ออกจากส่วน เปลี่ยนแปลง ของแม่แบบได้ มาร์กอัปคงที่จะถูกสร้างขึ้นครั้งเดียว ส่วนการเชื่อมโยงแบบเปลี่ยนแปลงเท่านั้นที่จะได้รับเอฟเฟกต์แบบรีแอกทีฟ การแยกคงที่และเปลี่ยนแปลงนี้เองที่ทำให้สามารถอัปเดตโดยตรงได้

<template>
  <div class="card">     <!-- static, created once -->
    <h2>{{ title }}</h2>  <!-- dynamic, gets an effect -->
  </div>
</template>

ข้อจำกัดและการทำงานร่วมกัน

ในช่วงทดลองใช้งาน ฟีเจอร์บางอย่างและไลบรารีภายนอกบางตัวที่พึ่งพา DOM เสมือน เช่น ฟังก์ชันเรนเดอร์แบบกำหนดเองและ API ของ VNode บางรายการ อาจยังไม่รองรับอย่างสมบูรณ์ในคอมโพเนนต์แบบ vapor การทำงานร่วมกับคอมโพเนนต์ทั่วไปยังรองรับอยู่ คุณจึงทยอยนำมาใช้ได้

ความสัมพันธ์กับ Solid และ Svelte

Vapor ทำให้ Vue เข้าใกล้แนวทาง ทำงานขณะคอมไพล์โดยไม่ใช้ DOM เสมือน ที่ Solid และ Svelte บุกเบิกไว้มากขึ้น โดยใช้รีแอกทีฟแบบละเอียดระดับย่อยขับเคลื่อนการเปลี่ยนแปลง DOM โดยตรง พร้อมคง API และระบบนิเวศของ Vue ไว้

เมื่อใดควรเลือกใช้ Vapor

พิจารณาใช้ Vapor กับส่วนติดต่อผู้ใช้ที่ต้องการประสิทธิภาพสูงและมีการอัปเดตบ่อย เช่น รายการขนาดใหญ่ แดชบอร์ด และภาพเคลื่อนไหว เมื่อ Vapor มีความเสถียรแล้ว สำหรับแอปทั่วไป รันไทม์มาตรฐานก็ทำงานได้รวดเร็วอยู่แล้ว จึงควรเลือกใช้ Vapor เฉพาะจุดที่การวัดประสิทธิภาพแสดงว่าช่วยได้

ตรวจสอบความเข้าใจ

ทดสอบความเข้าใจของคุณเกี่ยวกับ Vapor Mode

สรุป

คุณได้เรียนรู้เกี่ยวกับ Vapor Mode:

นำการตรวจหาความแตกต่างของ DOM เสมือนออกไป คอมไพเลอร์จะสร้างโค้ดสำหรับอัปเดต DOM โดยตรง
ใช้ระบบรีแอกทีฟเดิม — ref, reactive, computed ยังคงเหมือนเดิม
เลือกใช้เป็นรายคอมโพเนนต์ จึงทยอยนำมาใช้และทำงานร่วมกับระบบเดิมได้
การวิเคราะห์ส่วนคงที่และส่วนเปลี่ยนแปลงขณะคอมไพล์ช่วยให้เกิดการอัปเดตแบบละเอียดระดับย่อย
คาดว่าจะช่วยเพิ่มประสิทธิภาพ ลดการใช้หน่วยความจำ และลดขนาดรันไทม์ได้อย่างมาก

คำถามที่พบบ่อย

บทเรียน “โหมด Vue Vapor: การเพิ่มประสิทธิภาพระหว่างคอมไพล์” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “โหมด Vue Vapor: การเพิ่มประสิทธิภาพระหว่างคอมไพล์” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “โหมด Vue Vapor: การเพิ่มประสิทธิภาพระหว่างคอมไพล์”

โหมด Vapor ลบ DOM เสมือนออก ความหมายต่อประสิทธิภาพ และการคอมไพล์แบบเลือกเปิดใช้ คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “โหมด Vue Vapor: การเพิ่มประสิทธิภาพระหว่างคอมไพล์” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม

ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

โหมด Vue Vapor: การเพิ่มประสิทธิภาพระหว่างคอมไพล์
ระบบนิเวศ Vite: ปลั๊กอินและเครื่องมือ
Vue Macros และข้อเสนอจากชุมชน
การเลือกสแตก Vue ที่เหมาะสมสำหรับปี 2025+

← กลับไปที่ Vue Academy