Vue Academy · บทเรียน

เทคนิคการจดจำผลลัพธ์

หลีกเลี่ยงการคำนวณซ้ำด้วยการจดจำผลลัพธ์

บทเรียน 2 จาก 313 ขั้นตอน

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

ทำงานให้น้อยลง

ประสิทธิภาพมักเกิดจากการไม่คำนวณหรือแสดงผลสิ่งที่ยังไม่เปลี่ยนแปลงซ้ำ Vue มีเครื่องมือหลายอย่างสำหรับการจดจำผลลัพธ์ ซึ่งจะเก็บผลลัพธ์ไว้และข้ามการอัปเดตที่ไม่จำเป็น

การแคชค่าที่คำนวณ

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

computed: {
  expensiveTotal() {
    return this.items.reduce((sum, i) => sum + i.price, 0)
  }
}

คุณสมบัติที่คำนวณเทียบกับเมธอด

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

// method: runs on EVERY render
methods: { total() { /* ... */ } }

// computed: cached until items change
computed: { total() { /* ... */ } }

คำสั่งแสดงผลครั้งเดียวสำหรับเนื้อหาคงที่

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

<template>
  <h1 v-once>{{ appTitle }}</h1>
</template>

ควรใช้คำสั่งแสดงผลครั้งเดียวเมื่อใด

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

<footer v-once>
  <p>Copyright 2024. All rights reserved.</p>
</footer>

การจดจำผลลัพธ์สำหรับรายการที่มีค่าใช้จ่ายสูง

คำสั่ง v-memo จะจดจำผลลัพธ์ของโครงสร้างย่อย และแสดงผลซ้ำเฉพาะเมื่อค่าในอาร์เรย์การพึ่งพาเปลี่ยนแปลง เหมาะอย่างยิ่งกับรายการขนาดใหญ่

<div v-for="item in list" :key="item.id" v-memo="[item.selected]">
  {{ item.name }} - {{ item.selected }}
</div>

การทำงานของคำสั่งจดจำผลลัพธ์

แต่ละรายการจะแสดงผลซ้ำเฉพาะเมื่ออาร์เรย์การจดจำผลลัพธ์ของรายการนั้นเปลี่ยนแปลง หาก item.selected ยังคงเดิม Vue จะข้ามการแสดงผลแถวนั้นซ้ำทั้งหมด แม้ว่าคอมโพเนนต์แม่จะอัปเดตก็ตาม

หลีกเลี่ยงการแสดงผลซ้ำที่ไม่จำเป็น

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

คีย์ที่คงที่ในรายการ

กำหนด v-for ให้มี :key ที่คงที่และไม่ซ้ำกันเสมอ การใช้อินเด็กซ์ของอาร์เรย์เป็นคีย์อาจทำให้ Vue นำโหนด DOM ที่ไม่ถูกต้องกลับมาใช้ และแสดงผลซ้ำมากกว่าที่จำเป็น

<!-- prefer a stable id -->
<li v-for="user in users" :key="user.id">{{ user.name }}</li>

ลดข้อมูลแบบตอบสนองให้น้อยที่สุด

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

import { shallowRef } from "vue"

// shallowRef avoids deep reactivity on large objects
const bigConfig = shallowRef(loadConfig())

การจดจำผลลัพธ์ของฟังก์ชันบริสุทธิ์

สำหรับการคำนวณ JavaScript แบบบริสุทธิ์ที่อยู่นอกการตอบสนองของ Vue คุณสามารถเก็บผลลัพธ์ไว้ในแมปอย่างง่าย เพื่อให้การเรียกซ้ำด้วยค่าป้อนเข้าเดิมคืนผลลัพธ์ได้ทันที

const cache = new Map()
function fib(n) {
  if (n < 2) return n
  if (cache.has(n)) return cache.get(n)
  const result = fib(n - 1) + fib(n - 2)
  cache.set(n, result)
  return result
}

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

ทดสอบความรู้ของคุณเกี่ยวกับการจดจำผลลัพธ์

ตอบคำถามในบทเรียนแบบโต้ตอบ

สรุปทบทวน

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

เริ่มต้นได้ฟรี

เรียนรู้ HTML ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 42
บทเรียน: 156

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

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

บทเรียน “เทคนิคการจดจำผลลัพธ์” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “เทคนิคการจดจำผลลัพธ์”

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

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

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

บทเรียน “เทคนิคการจดจำผลลัพธ์” ใช้เวลานานแค่ไหน

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

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

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

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

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