import { Meta } from '@storybook/addon-docs/blocks'

<Meta title='@dxtmisha/vi/functional/Functions/render - Render component với Key'/>

# `render`

Một bản bọc (wrapper) cho hàm `h` (hyperscript) của Vue, cung cấp khả năng tự động tạo key cho các thành phần. Nó đảm bảo rằng các thành phần có key duy nhất để render hiệu quả và xử lý các chuyển đổi (transitions), đặc biệt là khi làm việc với danh sách hoặc các phần tử động.

**Tham số:**
- `name: string | any` — Tên hoặc thẻ của thành phần cần render.
- `props?: T` — Các thuộc tính truyền vào thành phần.
- `children?: RawChildren | RawSlots` — Các thành phần con hoặc slot của thành phần.
- `index?: string` — Một chỉ số hoặc định danh tùy chọn được sử dụng để tạo key.

**Trả về:**
`VNode` — Node ảo đã được render.

```typescript
import { render } from '@dxtmisha/functional'

// Render một div với key được tạo tự động
const vnode = render('div', { class: 'container' }, 'Chào thế giới')
// key => '.div.container'

// Render một thành phần với index cụ thể để tạo key
const item = render('my-component', { data: itemData }, null, 'item-1')
// key => '.my-component.item-1'
```

### Cách tạo Key

Key (`key`) cho Vue component được hình thành theo phương thức **cộng dồn (additive)**. Nó luôn bắt đầu bằng một dấu chấm theo sau là tên thành phần (`.name`), sau đó nối thêm các giá trị sau bằng dấu chấm (nếu chúng tồn tại):

1.  **`.name`** — nếu `name` là một chuỗi.
2.  **.index** — từ tham số thứ ba của hàm `render`.
3.  **.props.index** — nếu có trong đối tượng thuộc tính và là một chuỗi.
4.  **.className** — nếu class được chỉ định trong `props`.
5.  **.props.id** — nếu ID được chỉ định trong `props`.

Điều này đảm bảo tính duy nhất của key ngay cả khi tên các thành phần giống nhau.
