# primefaces/primevue `primevue` > PrimeVue 是 Vue 的开源 UI 库，具有丰富的 80 多个组件、主题设计器、各种主题替代品（例如 Material、Bootstrap、Tailwind）、高级模板和专业支持。此外，它还与 PrimeBlock 集成，PrimeBlock 拥有 370 多个随时可用的 UI 块，可立即构建出色的应用程序。 **版本：** 4.5.4（2025 年 12 月） **部署：** @primeuix/styled@^0.7.4、@primeuix/utils@^0.6.2、@primeuix/styles@^2.0.2、@primevue/core@4.5.4、@primevue/icons@4.5.4 **标签：** v2-stable：2.10.4（12 月） 2023 年），v3 稳定版：3.53.1（2024 年 12 月），最新版本：4.5.4（2025 年 12 月） **参考文献：** [文档]() — API 参考、指南 ## API 变更本节记录了特定于版本的 API 更改 - 优先考虑最近的主要/次要版本。 * 重大事件：“Calendar”重命名为“DatePicker”——v3 组件在 v4 中重命名为“DatePicker”[来源]() * 重大事件：“Dropdown”重命名为“Select”——v3 组件在 v4 中重命名为“Select”[来源]() * 重大事件：“Sidebar”重命名为“Drawer”——v3 组件在 v4 中重命名为“Drawer”[来源]() * 重大事件：“OverlayPanel”重命名为“Popover”——v3 组件在 v4 中重命名为“Popover”[来源]() * 重大事件：“InputSwitch”重命名为“ToggleSwitch”——v3 组件在 v4 中重命名为“ToggleSwitch”[来源]() * 重大突破：“TabView”被“Tabs”取代——使用“TabList”、“Tab”、“TabPanels”和“TabPanel”的新组件结构[来源]() * 重大突破：“Steps”被“Stepper”取代——使用“StepList”、“Step”、“StepPanels”和“StepPanel”的新组件结构[来源]() * 突破：`Accordion` 重新实现 - 现在使用 `AccordionPanel`、`AccordionHeader` 和 `AccordionContent` 组件 [来源]() * 中断：`v-model:value` — v4 在 `Tabs`、`Accordion` 和 `Stepper` 中使用 `v-model:value` 作为活动状态，而不是 `v-model` [来源]() * 已弃用：`inputStyle` — 属性被 `inputVariant` 替换（值：'filled' | 'outlined'）[来源]() * 新功能：`@primevue/forms` — 用于高级表单管理和验证的新专用包 [来源]() * 新： `Fluid` 组件 - 使后代跨越全宽的布局组件 [来源]() * 新： `IconField` 和 `InputIcon` — 用于包装输入和图标以用于装饰目的的新组件 [来源]() * 新功能： `useId` 和 `useAttrSelector` — 用于唯一 ID 生成和属性选择器的新核心可组合项 [来源]() **还更改了：** `DataTable` `showClearButton` 默认为 `false` (v4.3.0) · `IftaLabel` 用于字段内标签的新组件 · `Checkbox` 添加了 `infinite` 状态 · `OverlayBadge` 新组件替换了 `Badge` 指令 · `InlineMessage` 组件已弃用 · `iconPosition` 从 `IconField` 中删除了 · `warning` 属性重命名为 `warn` · `Drawer` 添加了 `before-hide` 发射 (v4.3.0) ## 最佳实践 * 使用 `Fluid` 组件作为包装器，将全角样式批量应用到输入，而不是将 `fluid` 属性添加到每个单独的字段，以获得更干净、更可维护的模板 [来源]() <流体>

<选择占位符=“全宽”/>

* 在 Stepper 垂直布局中，始终将“Step”和“StepPanel”包装在“StepItem”组件内，以确保标题和内容之间的结构和连接正确[来源]() * 在“Step”或“Tab”等组件上使用“asChild”和“v-slot”来实现无头模式以实现完整的 UI 控制，同时保留 PrimeVue 的内置辅助功能逻辑 [来源]() <按钮@click =“activateCallback”v-bind =“a11yAttrs.header”> 步骤 {{ 值 }} * 对于具有大型数据集的“DataTable”中的高性能行扩展，请结合“dataKey”使用“expandedRows”对象，而不是行对象数组[源]() // 首选（O(1) 查找） const ExpandedRows = ref({ '1004': true, '1005': true }); // 在模板中 * 使用 `stateStorage` 和 `stateKey` 在 `DataTable` 中启用自动用户偏好持久性（排序、过滤、分页），以改善跨页面访问的用户体验 [来源]() * 在“VirtualScroller”中添加“delay”，以在快速滚动期间限制渲染，显着提高超大列表的 UI 响应能力 * 通过使用不带“TabPanels”的“Tabs”并将其与“router-link”结合起来实现语义导航菜单，以实现可访问的、状态感知的顶部或侧边栏[来源]() * 始终使用“IconField”和“InputIcon”包裹输入和图标，以确保正确的定位和样式，支持前导和尾随图标放置[源]() <图标字段> * 使用 `IftaLabel` 来创建现代、顶部对齐的字段内标签，这些标签在视觉上与输入集成并自动处理验证状态 [来源]() * 利用内置的“DataTable”上下文菜单集成提供特定于行的操作，无需手动事件监听器管理或自定义定位逻辑[源]()

初级技能

包含技能