Vue Academy · บทเรียน

เจาะลึกฟังก์ชัน h()

ลายเซ็น h(type, props, children) โครงสร้าง VNode และการเรนเดอร์ชนิดคอมโพเนนต์แบบไดนามิก

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

ฟังก์ชัน h คืออะไร

ฟังก์ชัน h (ย่อมาจากไฮเปอร์สคริปต์) สร้างโหนด DOM เสมือน (VNodes) โดยตรงใน JavaScript ฟังก์ชันนี้เป็นพื้นฐานที่แม่แบบจะถูกคอมไพล์ลงมาใช้ ฟังก์ชันเรนเดอร์จะคืนผลลัพธ์จากการเรียกใช้ h

รูปแบบการเรียกใช้

h รับอาร์กิวเมนต์สามรายการ ได้แก่ h(type, props, children) โดยชนิดอาจเป็นสตริงชื่อแท็ก ออบเจ็กต์คอมโพเนนต์ หรือคอมโพเนนต์เชิงฟังก์ชัน ส่วนพร็อพคือออบเจ็กต์ของแอตทริบิวต์ พร็อพ และเหตุการณ์ และองค์ประกอบลูกอาจเป็นข้อความ อาร์เรย์ของ VNodes หรือออบเจ็กต์สล็อต

import { h } from "vue";

h(type, props, children);

องค์ประกอบแบบง่าย

การส่งชื่อแท็กและออบเจ็กต์พร็อพที่มี class จะสร้างองค์ประกอบที่มีรูปแบบตามกำหนด อาร์กิวเมนต์ที่สามในที่นี้คือเนื้อหาข้อความธรรมดา

import { h } from "vue";

h("div", { class: "foo" }, "text");
// renders: <div class="foo">text</div>

พร็อพกับแอตทริบิวต์

ทุกอย่างอยู่ในออบเจ็กต์พร็อพเดียวกัน ได้แก่ แอตทริบิวต์ HTML พร็อพของ DOM class style และตัวรับฟังเหตุการณ์ Vue จะพิจารณาเองว่าแต่ละรายการควรอยู่ที่ใดขณะปรับปรุงโหนด

h("input", {
  type: "text",
  value: "hello",
  class: "field",
  placeholder: "Type here"
});

อาร์เรย์ขององค์ประกอบลูก

เมื่อองค์ประกอบมีองค์ประกอบลูกหลายรายการ ให้ส่งอาร์เรย์ของ VNodes เป็นอาร์กิวเมนต์ที่สาม องค์ประกอบลูกแต่ละรายการก็คือการเรียกใช้ h อีกครั้ง

h("ul", null, [
  h("li", null, "item")
]);
// renders: <ul><li>item</li></ul>

การส่ง null เมื่อไม่มีพร็อพส์

หากองค์ประกอบไม่มีพร็อพส์ คุณสามารถส่ง null (หรือออบเจ็กต์ว่าง) เป็นอาร์กิวเมนต์ตัวที่สองได้ เพื่อให้ children ยังคงอยู่ในตำแหน่งที่สาม

h("ul", null, [
  h("li", null, "first"),
  h("li", null, "second")
]);

การเรนเดอร์คอมโพเนนต์

อาร์กิวเมนต์ประเภทสามารถเป็นคอมโพเนนต์ที่นำเข้าได้ พร็อพส์ที่คุณส่งเข้าไปจะกลายเป็นพร็อพส์ของคอมโพเนนต์นั้น

import { h } from "vue";
import MyComponent from "./MyComponent.vue";

h(MyComponent, { title: "Hello" });

การส่งสล็อตในรูปออบเจ็กต์

หากต้องการส่งเนื้อหาของสล็อตให้คอมโพเนนต์ อาร์กิวเมนต์ children จะกลายเป็นออบเจ็กต์ของฟังก์ชัน แต่ละคีย์คือชื่อสล็อต และแต่ละค่าคือฟังก์ชันที่คืนค่า VNodes หรือข้อความ

h(MyComponent, { title: "Hello" }, {
  default: () => "slot content"
});

สล็อตแบบมีชื่อและสล็อตแบบมีขอบเขต

สล็อตหลายสล็อตก็คือคีย์หลายคีย์ สล็อตแบบมีขอบเขตจะได้รับพร็อพส์เป็นอาร์กิวเมนต์ของฟังก์ชัน

h(MyComponent, null, {
  header: () => h("h1", null, "Title"),
  default: (props) => h("p", null, props.text)
});

ตัวรับฟังเหตุการณ์

เหตุการณ์คือพร็อพส์ที่มีคำนำหน้า on ตามด้วยชื่อเหตุการณ์แบบ PascalCase ตัวรับฟังการคลิกคือพร็อพส์ onClick

h("button", {
  onClick: () => console.log("clicked")
}, "Press me");

การคืนค่า h จากฟังก์ชันเรนเดอร์

ภายใน setup คุณสามารถคืนค่าฟังก์ชันเรนเดอร์แทนเทมเพลตได้ ฟังก์ชันนี้จะถูกเรียกทุกครั้งที่เรนเดอร์ใหม่เพื่อสร้างแผนผัง VNode

import { h, ref } from "vue";

export default {
  setup() {
    const count = ref(0);
    return () => h("button", {
      onClick: () => count.value++
    }, "Count: " + count.value);
  }
};

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

คุณจะส่งเนื้อหาของสล็อตเริ่มต้นให้คอมโพเนนต์โดยใช้ h ได้อย่างไร

สรุปทบทวน

ฟังก์ชัน h สร้าง VNodes ด้วย h(type, props, children) โดย type คือแท็กหรือคอมโพเนนต์ props ใช้เก็บแอตทริบิวต์และตัวรับฟัง onEvent ส่วน children อาจเป็นข้อความ อาร์เรย์ของ VNodes หรือออบเจ็กต์สล็อตที่มีฟังก์ชัน ฟังก์ชันเรนเดอร์จะคืนค่าการเรียกใช้ h และทำงานทุกครั้งที่เรนเดอร์ใหม่

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

บทเรียน “เจาะลึกฟังก์ชัน h()” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “เจาะลึกฟังก์ชัน h()”

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

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

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

บทเรียน “เจาะลึกฟังก์ชัน h()” ใช้เวลานานแค่ไหน

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

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

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

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

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