Vue Academy · บทเรียน

รูปแบบคอมโพเนนต์ลำดับสูง (HOC)

การห่อคอมโพเนนต์ด้วย HOC การส่งต่อ props และสล็อต และการเลือกใช้ HOC เทียบกับคอมโพสิเบิล

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

คอมโพเนนต์ลำดับสูงคืออะไร

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

รูปแบบลายเซ็นของฟังก์ชัน

ตามธรรมเนียม HOC จะตั้งชื่อด้วยคำนำหน้า with โดยรับคอมโพเนนต์ที่ห่อหุ้มไว้และคืนค่าคอมโพเนนต์ที่เพิ่มความสามารถแล้ว

function withLogging(Wrapped) {
  // return a new component
}

การคืนค่า defineComponent

คอมโพเนนต์ใหม่สร้างขึ้นด้วย defineComponent ฟังก์ชัน setup ของคอมโพเนนต์นี้จะเรนเดอร์คอมโพเนนต์ที่ห่อหุ้มไว้ผ่าน h

import { defineComponent, h } from "vue";

function withLogging(Wrapped) {
  return defineComponent({
    setup(props, ctx) {
      return () => h(Wrapped, props, ctx.slots);
    }
  });
}

การส่งต่อแอตทริบิวต์

เพื่อให้ตัวห่อหุ้มทำงานได้อย่างโปร่งใส ให้กระจาย ctx.attrs ลงในคอมโพเนนต์ที่ห่อหุ้มไว้ วิธีนี้จะส่งต่อคลาส สไตล์ และพร็อพส์ที่ไม่รู้จัก

setup(props, { attrs, slots }) {
  return () => h(Wrapped, { ...attrs }, slots);
}

การส่งต่อสล็อต

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

return () => h(Wrapped, attrs, slots);

การเพิ่มพฤติกรรมที่ใช้ร่วมกันในหลายส่วน

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

import { onMounted, onUnmounted } from "vue";

function withLogging(Wrapped) {
  return defineComponent({
    setup(props, { attrs, slots }) {
      onMounted(() => console.log("mounted"));
      onUnmounted(() => console.log("unmounted"));
      return () => h(Wrapped, attrs, slots);
    }
  });
}

การใช้ HOC

ห่อหุ้มคอมโพเนนต์ใดก็ได้ แล้วใช้ผลลัพธ์เหมือนคอมโพเนนต์ทั่วไปในเทมเพลตหรือฟังก์ชันเรนเดอร์อื่น

import BaseTable from "./BaseTable.vue";

const LoggedTable = withLogging(BaseTable);
// register or use LoggedTable like any component

การตั้งชื่อตัวห่อหุ้ม

กำหนด name เพื่อให้ระบุตัวห่อหุ้มได้ใน Vue DevTools การนำชื่อของคอมโพเนนต์ที่ห่อหุ้มมาประกอบด้วยจะช่วยให้แผนผังอ่านง่าย

return defineComponent({
  name: "WithLogging(" + (Wrapped.name || "Anonymous") + ")",
  setup(props, ctx) { /* ... */ }
});

การแทรกพร็อพส์เพิ่มเติม

HOC สามารถจัดเตรียมพร็อพส์เพิ่มเติมให้คอมโพเนนต์ที่ห่อหุ้มได้ เช่น ชุดข้อมูลที่ดึงมา หรือธงคุณลักษณะ

function withUser(Wrapped) {
  return defineComponent({
    setup(props, { attrs, slots }) {
      const user = inject("currentUser");
      return () => h(Wrapped, { ...attrs, user }, slots);
    }
  });
}

HOC เทียบกับคอมโพสิเบิล

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

การประกอบ HOC หลายตัว

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

const Enhanced = withLogging(withUser(BaseTable));

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

เพื่อให้ตัวห่อหุ้ม HOC ทำงานได้อย่างโปร่งใส ตัวห่อหุ้มต้องส่งต่ออะไรให้คอมโพเนนต์ที่ห่อหุ้มไว้

สรุปทบทวน

HOC อย่าง withLogging(Wrapped) จะคืนค่า defineComponent ใหม่ที่ฟังก์ชัน setup เรนเดอร์คอมโพเนนต์ที่ห่อหุ้มไว้ด้วย h(Wrapped, attrs, slots) พร้อมเพิ่มพฤติกรรมที่ใช้ร่วมกันในหลายส่วน เช่น การบันทึกข้อมูลหรือพร็อพส์ที่แทรกเข้ามา ให้ส่งต่อแอตทริบิวต์และสล็อตเพื่อความโปร่งใส และเลือกใช้คอมโพสิเบิลเมื่อคุณต้องการเพียงแบ่งปันตรรกะ

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

บทเรียน “รูปแบบคอมโพเนนต์ลำดับสูง (HOC)” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “รูปแบบคอมโพเนนต์ลำดับสูง (HOC)”

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

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

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

บทเรียน “รูปแบบคอมโพเนนต์ลำดับสูง (HOC)” ใช้เวลานานแค่ไหน

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

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

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

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

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