Render செயல்பாடுகளை அல்லது JSX ஐ templates க்கு பதிலாக எப்போது பயன்படுத்துவீர்கள்?

Question

Accepted Answer

Vue templates **render செயல்பாடுகளாக** தொகுக்கப்படுகின்றன, அவை virtual DOM ஐ வழங்குகின்றன. வழக்கமாக நீங்கள் templates எழுதுகிறீர்கள், ஆனால் நீங்கள் UI ஐ நிரல்படியாக உருவாக்க **JavaScript இன் முழு சக்திக்கு** தேவைப்படும்போது render செயல்பாட்டை (அல்லது JSX) நேரடியாக எழுதலாம். ## ஒரு render செயல்பாடு ```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` என்ற தலைப்பைத் தேர்ந்தெடுக்க இயக்க நேரத்தில் கணக்கிடப்படுகிறது — template வாக்கியறிதலுடன் அவ்வளவு சாதாரணமல்ல. ## JSX (Vue JSX plugin உடன்) ```jsx export default { props: ["items"], setup(props) { return () => (
{props.items.map((item) => item.visible ?
{item.name}
: null )}
); }, }; ``` JSX மரத்தை உருவாக்க வழக்கமான JS (`.map`, நிபந்தனைகள், மாறிகள்) ஐ பயன்படுத்த அனுமதிக்கிறது — React உருவாக்குநர்களுக்கு பரிச்சயம் மற்றும் மிகவும் இயக்கமான கட்டமைப்புகளுக்கு மிகவும் நমনீயமாக உள்ளது. ## Render செயல்பாடுகள் / 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 செயல்பாடுகள் தானாகவாக பெறாது. ## ஏன் இது முக்கியம் Templates சரியான இயல்பிலை — படிக்கக்கூடியவை, கருவி-நட்பு, மற்றும் compiler-optimized. ஆனால் render செயல்பாடுகள்/JSX ஆகியவை UI நிரல்படியாக உருவாக்கப்பட வேண்டியபோது탈출ச் சாலை (இயக்க குறிச்சொற்கள், recursive மரங்கள், library கூறுகள்) இங்கு template வாக்கியறிதல் சிக்கலாகிறது. இரண்டும் உள்ளன என்பதை அறிந்தால் — மற்றும் templates வழக்கமான app குறியீட்டிற்கு விரும்பப்படுகின்றன while render செயல்பாடுகள் இயக்க/library சூழ்நிலைகளுக்கு பொருந்தும் — நீங்கள் எல்லா இடங்களிலும் ஒரு அணுகுமுறையைக் கட்டாயப்படுத்தாமல் சரியான கருவியைத் தேர்ந்தெடுக்க விடுகிறது.