Template của Vue được biên dịch thành render function trả về virtual DOM. Thông thường bạn viết template, nhưng bạn có thể viết trực tiếp render function (hoặc JSX) khi bạn cần toàn bộ sức mạnh của JavaScript để tạo UI theo lập trình.
{ h } ;
{
: [],
() {
(, slots.());
},
};
h(tag, props, children) dựng các vnode theo cách mệnh lệnh. Ở đây cấp độ heading được tính lúc runtime để chọn h1–h6 — khó xử với cú pháp template.
export default {
props: ["items"],
setup(props) {
return () => (
<ul>
{props.items.map((item) =>
item.visible ? <li key={item.id}>{item.name}</li> : null
)}
</ul>
);
},
};
JSX cho phép bạn dùng JS thuần (.map, điều kiện, biến) để dựng cây — quen thuộc với lập trình viên React và linh hoạt hơn cho các cấu trúc động cao.
✓ Cấu trúc theo lập trình: một tag/component được quyết định lúc runtime (heading động, UI dựa trên schema)
✓ Render có điều kiện cao hoặc đệ quy khó diễn đạt với v-if/v-for
✓ Xây dựng thư viện component tái sử dụng / higher-order component
✓ Render dựa trên logic JS phức tạp nơi directive của template trở nên vụng về
✓ Gần như mọi UI của app — template dễ đọc hơn, được compiler tối ưu,
và hưởng lợi từ các gợi ý lúc biên dịch (static hoisting, patch flag) cho hiệu năng
✓ Tooling tốt hơn: highlight IDE, kiểm tra kiểu, dễ hơn cho cả team
Đáng chú ý, trình biên dịch template thêm các tối ưu hiệu năng (nó biết cái gì tĩnh và cái gì động) mà render function viết tay không tự động có được.
Template là lựa chọn mặc định đúng đắn — dễ đọc, thân thiện với tooling, và được compiler tối ưu.
Nhưng render function/JSX là lối thoát hiểm khi UI phải được tạo theo lập trình (tag động, cây đệ quy, component thư viện) nơi cú pháp template trở nên gượng ép.
Biết cả hai tồn tại — và rằng template được ưu tiên cho code app thông thường trong khi render function phù hợp với kịch bản động/thư viện — cho phép bạn chọn đúng công cụ mà không ép buộc một cách tiếp cận ở khắp nơi.