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

การเลื่อนเสมือนสำหรับรายการขนาดใหญ่

vue-virtual-scroller, RecycleScroller และการจัดการการเรนเดอร์ที่ความสูงคงที่เทียบกับความสูงแปรผัน

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

ปัญหาของรายการขนาดใหญ่

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

ติดตั้ง vue-virtual-scroller

ไลบรารียอดนิยมคือ vue-virtual-scroller ให้ติดตั้งไลบรารีนี้และนำเข้าสไตล์ของไลบรารี

npm install vue-virtual-scroller

ลงทะเบียนคอมโพเนนต์

นำเข้า RecycleScroller และ CSS ของคอมโพเนนต์ จากนั้นนำมาใช้ในคอมโพเนนต์ของคุณ

import { RecycleScroller } from "vue-virtual-scroller";
import "vue-virtual-scroller/dist/vue-virtual-scroller.css";

พร็อพ items

RecycleScroller รับอาร์เรย์ข้อมูลทั้งหมดของคุณผ่านพร็อพ items แต่จะไม่เรนเดอร์ทั้งหมดพร้อมกัน โดยจะเรนเดอร์เฉพาะช่วงที่มองเห็น

<RecycleScroller :items="rows" />

พร็อพ item-size

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

<RecycleScroller
  :items="rows"
  :item-size="48"
/>

พร็อพ key-field

กำหนดเอกลักษณ์ที่คงที่ให้แต่ละรายการด้วย key-field เพื่อให้โหนดที่นำกลับมาใช้ใหม่จับคู่กับข้อมูลได้อย่างถูกต้อง

<RecycleScroller
  :items="rows"
  :item-size="48"
  key-field="id"
/>

เทมเพลตรายการ v-slot

ใช้สล็อตแบบมีขอบเขตเริ่มต้นเพื่อเรนเดอร์แต่ละรายการที่มองเห็น สล็อตจะเปิดเผย item ปัจจุบันให้ใช้งาน

<RecycleScroller :items="rows" :item-size="48" key-field="id">
  <template v-slot="{ item }">
    <div class="row">{{ item.name }}</div>
  </template>
</RecycleScroller>

เรนเดอร์เฉพาะรายการที่มองเห็น

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

ความสูงรายการคงที่เทียบกับความสูงผันแปร

ความสูงคงที่ทำงานได้เร็วที่สุด เพราะตำแหน่งต่าง ๆ คำนวณได้ด้วยเลขคณิตล้วน ๆ เมื่อแถวมีความสูงแตกต่างกัน คุณจะต้องใช้แนวทางอื่น

จัดการความสูงที่ผันแปร

สำหรับความสูงที่ผันแปร ให้ใช้ DynamicScroller ร่วมกับ DynamicScrollerItem ซึ่งจะวัดรายการที่เรนเดอร์แล้วและปรับตำแหน่งให้เหมาะสม

import { DynamicScroller, DynamicScrollerItem } from "vue-virtual-scroller";

<DynamicScroller :items="rows" :min-item-size="40" key-field="id">
  <template v-slot="{ item, active }">
    <DynamicScrollerItem :item="item" :active="active">
      <div>{{ item.text }}</div>
    </DynamicScrollerItem>
  </template>
</DynamicScroller>

ข้อแลกเปลี่ยน

การเลื่อนเสมือนทำให้ฟีเจอร์ต่าง ๆ ซับซ้อนขึ้น เช่น การค้นหาในหน้า (Ctrl+F) ลิงก์จุดยึดไปยังรายการนอกหน้าจอ และการช่วยการเข้าถึง ควรใช้เทคนิคนี้เฉพาะเมื่อรายการมีขนาดใหญ่อย่างแท้จริง

ตรวจสอบอย่างรวดเร็ว

RecycleScroller เรนเดอร์อะไรลงใน DOM จริง ๆ

สรุปทบทวน

การเลื่อนเสมือนด้วย RecycleScroller ของ vue-virtual-scroller จะเรนเดอร์เฉพาะรายการที่มองเห็น ส่งข้อมูลผ่าน items กำหนด item-size และ key-field แล้วเรนเดอร์แต่ละแถวในเทมเพลต v-slot ใช้ความสูงคงที่เพื่อความเร็ว หรือใช้ DynamicScroller เมื่อความสูงผันแปร และสงวนเทคนิคนี้ไว้สำหรับรายการที่มีขนาดใหญ่อย่างแท้จริง

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

บทเรียน “การเลื่อนเสมือนสำหรับรายการขนาดใหญ่” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “การเลื่อนเสมือนสำหรับรายการขนาดใหญ่”

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

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

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

บทเรียน “การเลื่อนเสมือนสำหรับรายการขนาดใหญ่” ใช้เวลานานแค่ไหน

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

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

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

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

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