0Pricing
Vue Academy · บทเรียน

v-memo สำหรับการจดจำเทมเพลต

คำสั่ง v-memo อาร์เรย์การพึ่งพา กรณีที่ข้ามการเรนเดอร์ใหม่ และการเปรียบเทียบกับ computed

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

v-memo คืออะไร

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

อาร์เรย์ของการพึ่งพา

คุณผูกอาร์เรย์ของการพึ่งพาไว้ ตราบใดที่ค่าทุกค่าในอาร์เรย์เท่ากับค่าก่อนหน้า Vue จะข้ามการอัปเดตองค์ประกอบทั้งหมดรวมถึงองค์ประกอบลูก

<div v-memo="[dep1, dep2]">
  <!-- skipped unless dep1 or dep2 change -->
</div>

อาร์เรย์ว่าง

อาร์เรย์ว่าง v-memo="[]" หมายความว่าเนื้อหาจะเรนเดอร์ครั้งเดียวและไม่อัปเดตอีก ซึ่งเทียบเท่ากับการเรนเดอร์เนื้อหาแบบคงที่เพียงครั้งเดียว

<div v-memo="[]">
  <!-- rendered once, never re-rendered -->
</div>

กรณีใช้งานหลัก: v-for

เหตุผลหลักที่ใช้ v-memo คือรายการขนาดใหญ่ ให้วางไว้ภายใน v-for เพื่อให้แต่ละแถวเรนเดอร์ใหม่เฉพาะเมื่อข้อมูลที่เกี่ยวข้องกับแถวนั้นเปลี่ยนแปลง

<div
  v-for="item in list"
  :key="item.id"
  v-memo="[item.id === selectedId]"
>
  ...
</div>

การจดจำผลลัพธ์ของแถวที่เลือก

ในตัวอย่างคลาสสิก แถวหลายพันแถวจะเรนเดอร์ใหม่เฉพาะเมื่อสถานะการเลือกของแถวเปลี่ยน การเปรียบเทียบ item.id === selectedId ทำให้แถวอัปเดตเฉพาะเมื่อถูกเลือกหรือเลิกเลือก

<tr
  v-for="item in items"
  :key="item.id"
  v-memo="[item.id === selectedId]"
>
  <td :class="{ active: item.id === selectedId }">
    {{ item.name }}
  </td>
</tr>

ระบุการพึ่งพาแบบรีแอกทีฟทั้งหมด

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

<!-- WRONG: name can change but is not listed -->
<div v-memo="[item.id]">{{ item.name }}</div>

อย่าใช้ร่วมกับ v-if

อย่าวาง v-memo บนองค์ประกอบเดียวกับ v-if หรือคำสั่งเชิงโครงสร้างของ v-for ในลักษณะที่ขัดแย้งกัน โดยเฉพาะอย่างยิ่ง ไม่รองรับการใช้ v-memo และ v-if บนองค์ประกอบเดียวกัน และจะทำให้เกิดพฤติกรรมที่ไม่กำหนดไว้

<!-- AVOID -->
<div v-memo="[a]" v-if="show">...</div>

v-memo เทียบกับ computed

computed จะเก็บแคชค่าที่คำนวณจากสถานะรีแอกทีฟ ส่วน v-memo จะเก็บแคช VNodes ที่เรนเดอร์แล้ว ทั้งสองอย่างแก้ปัญหาคนละแบบ: computed ช่วยหลีกเลี่ยงการคำนวณข้อมูลซ้ำ ส่วน v-memo ช่วยหลีกเลี่ยงการเรนเดอร์มาร์กอัปใหม่

เมื่อ computed ก็เพียงพอ

หากคอขวดของคุณอยู่ที่การคำนวณข้อมูลซ้ำ เช่น การกรอง การเรียงลำดับ หรือการจัดรูปแบบ ให้เลือกใช้ computed ก่อน เพราะเรียบง่ายกว่าและใช้ผิดได้ยากกว่า

import { computed } from "vue";

const sorted = computed(() =>
  [...items.value].sort((a, b) => a.rank - b.rank)
);

เมื่อ v-memo ช่วยได้

เลือกใช้ v-memo เฉพาะเมื่อการทำโปรไฟล์แสดงให้เห็นว่าการเรนเดอร์รายการขนาดใหญ่ใหม่เป็นส่วนที่ใช้เวลามากที่สุด และแถวส่วนใหญ่ไม่มีการเปลี่ยนแปลงระหว่างการอัปเดต

วัดผลก่อน

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

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

v-memo เป็นเครื่องมือที่เหมาะสมเมื่อใด

สรุปทบทวน

v-memo="[deps]" จะข้ามการเรนเดอร์ทรีย่อยใหม่ตราบใดที่การพึ่งพาที่ระบุไว้ทั้งหมดยังไม่เปลี่ยนแปลง จึงเหมาะอย่างยิ่งเมื่อใช้ภายในรายการ v-for ขนาดใหญ่ ให้ระบุการพึ่งพาแบบรีแอกทีฟทุกค่า อย่าใช้ร่วมกับ v-if บนองค์ประกอบเดียวกัน เลือกใช้ computed สำหรับค่าที่คำนวณต่อ และทำโปรไฟล์เสมอเพื่อยืนยันว่าได้ประสิทธิภาพเพิ่มขึ้นจริง

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

บทเรียน “v-memo สำหรับการจดจำเทมเพลต” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “v-memo สำหรับการจดจำเทมเพลต”

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

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

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

บทเรียน “v-memo สำหรับการจดจำเทมเพลต” ใช้เวลานานแค่ไหน

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

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

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

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

  1. v-memo สำหรับการจดจำเทมเพลต
  2. การวิเคราะห์ประสิทธิภาพด้วยแท็บ Performance ของ Vue DevTools
  3. การเลื่อนเสมือนสำหรับรายการขนาดใหญ่
  4. Web Worker กับ Vue
← กลับไปที่ Vue Academy