คุณจะใช้ render functions หรือ JSX แทน templates เมื่อไร

Question

Accepted Answer

Vue templates ได้รับการคอมไพล์เป็น **render functions** ที่คืนค่า virtual DOM โดยปกติคุณจะเขียน templates แต่คุณสามารถเขียน render function (หรือ JSX) โดยตรงเมื่อคุณต้องการ **พลังเต็มที่ของ JavaScript** ในการสร้าง UI โดยการเขียนโปรแกรม ## Render function ```js import { h } from "vue"; // h = hyperscript: creates a virtual DOM node export default { props: ["level"], setup(props, { slots }) { // dynamically choose the tag — hard to express in a template return () => h(`h${props.level}`, slots.default()); // → renders an

}, }; ``` `h(tag, props, children)` สร้าง vnodes โดยการบังคับใช้ ที่นี่ระดับหัวข้อคำนวณในเวลาทำงานเพื่อเลือก `h1`–`h6` — อึดอัดกับไวยากรณ์เทมเพลต ## JSX (ด้วยปลั๊กอิน Vue JSX) ```jsx export default { props: ["items"], setup(props) { return () => (
{props.items.map((item) => item.visible ?
{item.name}
: null )}
); }, }; ``` JSX ให้คุณใช้ JS ธรรมดา (`.map`, เงื่อนไข, ตัวแปร) เพื่อสร้างต้นไม้ — คุ้นเคยกับนักพัฒนา React และยืดหยุ่นมากขึ้นสำหรับโครงสร้างที่มีการเปลี่ยนแปลงสูง ## เมื่อ render functions / JSX คุ้มค่า ```text ✓ Programmatic structure: a tag/component decided at runtime (dynamic headings, schema-driven UI) ✓ Highly conditional or recursive rendering hard to express with v-if/v-for ✓ Building reusable component libraries / higher-order components ✓ Rendering based on complex JS logic where template directives feel clumsy ``` ## เมื่อจะใช้ templates (ค่าเริ่มต้น) ```text ✓ Almost all app UI — templates are more readable, optimized by the compiler, and benefit from compile-time hints (static hoisting, patch flags) for performance ✓ Better tooling: IDE highlighting, type-checking, easier for the whole team ``` สิ่งที่น่าสังเกต คือ template compiler เพิ่ม การเพิ่มประสิทธิภาพประสิทธิการณ์ (มันรู้ว่าอะไรเป็นแบบคงที่กับแบบไดนามิก) ซึ่ง render functions ที่เขียนด้วยมือไม่ได้รับโดยอัตโนมัติ ## ทำไมมันถึงสำคัญ Templates เป็นค่าเริ่มต้นที่ถูกต้อง — อ่านได้, เป็นมิตรกับเครื่องมือ และมีการเพิ่มประสิทธิภาพจากคอมไพเลอร์ แต่ render functions/JSX คือทางออกเมื่อ UI ต้องสร้างขึ้น โดยการเขียนโปรแกรม (แท็กแบบไดนามิก, ต้นไม้แบบเรียกซ้ำ, องค์ประกอบของไลบรารี) ซึ่งไวยากรณ์เทมเพลตจะกลายเป็นซับซ้อน การรู้ว่าทั้งสองมีอยู่ — และที่ templates ได้รับความนิยมสำหรับโค้ดแอปพลิเคชันทั่วไปในขณะที่ render functions เหมาะสำหรับสถานการณ์แบบไดนามิก/ไลบรารี — ช่วยให้คุณเลือกเครื่องมือที่เหมาะสมโดยไม่บังคับใช้วิธีเดียวทุกที่