Reka UI 2.1.0 版本发布：组件功能增强与问题修复

2026-02-04 04:29:12作者：蔡丛锟

概述

Reka UI（原 Radix Vue）2.1.0 版本正式发布！作为 Vue.js 生态系统中领先的无头 UI 组件库，本次更新带来了多项重要功能增强和问题修复，进一步提升了开发体验和组件稳定性。

🚀 核心功能增强

1. 时间字段组件（TimeField）全面升级

TimeField 组件在 2.1.0 版本中获得了显著的功能增强：

<script setup>
import { TimeFieldRoot, TimeFieldInput } from 'reka-ui'

const timeValue = ref()
</script>

<template>
  <TimeFieldRoot v-model="timeValue">
    <TimeFieldInput />
  </TimeFieldRoot>
</template>

新增特性：

支持 12/24 小时制自动切换
增强的键盘导航支持
改进的国际化日期格式化
更好的无障碍访问支持

2. 配置提供器（ConfigProvider）全局配置

新增全局配置支持，简化多语言和区域设置：

<script setup>
import { ConfigProvider, DatePickerRoot } from 'reka-ui'

const localeConfig = {
  locale: 'zh-CN',
  timeZone: 'Asia/Shanghai'
}
</script>

<template>
  <ConfigProvider :locale="localeConfig">
    <DatePickerRoot>
      <!-- 组件内容 -->
    </DatePickerRoot>
  </ConfigProvider>
</template>

3. 复选框组件类型支持扩展

Checkbox 组件现在支持更多数据类型：

<script setup>
import { CheckboxRoot } from 'reka-ui'

const selectedValues = ref(['option1', 'option2'])
</script>

<template>
  <CheckboxRoot v-model="selectedValues" value="option1">
    选项一
  </CheckboxRoot>
  <CheckboxRoot v-model="selectedValues" value="option2">
    选项二
  </CheckboxRoot>
</template>

🛠️ 开发者体验优化

类型系统改进

版本	类型支持	描述
2.0.x	基础类型推断	支持基本组件类型
2.1.0	增强类型推断	完整支持组合式API类型

// 增强的类型推断示例
import { usePrimitiveElement } from 'reka-ui'

const { primitiveElement } = usePrimitiveElement<HTMLButtonElement>()
// 现在能正确推断出 HTMLButtonElement 类型

新的 useFilter 组合式函数

新增 useFilter 组合式函数，简化列表过滤逻辑：

<script setup>
import { useFilter } from 'reka-ui'

const items = ref(['Apple', 'Banana', 'Cherry'])
const { filteredItems, query } = useFilter(items, {
  filter: (item, search) => item.toLowerCase().includes(search.toLowerCase())
})
</script>

<template>
  <input v-model="query" placeholder="搜索..." />
  <ul>
    <li v-for="item in filteredItems" :key="item">
      {{ item }}
    </li>
  </ul>
</template>

🐛 关键问题修复

导航菜单动画修复

graph TD
    A[导航菜单打开] --> B{位置计算}
    B --> C[正确位置]
    B --> D[错误位置 - 已修复]
    C --> E[平滑动画]
    D --> F[位置重置后动画]

修复问题：

导航菜单位置计算错误
动画结束后位置重置问题
SSR 环境下的闪烁问题

折叠面板 SSR 支持

Accordion 和 Collapsible 组件新增 unmount 属性，改善 SEO：

<script setup>
import { AccordionRoot, AccordionItem } from 'reka-ui'
</script>

<template>
  <AccordionRoot>
    <AccordionItem :unmount="true">
      <!-- 隐藏内容在 SSR 时不会渲染 -->
    </AccordionItem>
  </AccordionRoot>
</template>

组合框虚拟化改进

Combobox 组件虚拟化性能优化：

<script setup>
import { ComboboxRoot, ComboboxContent } from 'reka-ui'

const items = ref(Array.from({ length: 1000 }, (_, i) => `选项 ${i + 1}`))
</script>

<template>
  <ComboboxRoot>
    <ComboboxContent :virtualizer="true">
      <!-- 支持大量数据的平滑滚动 -->
    </ComboboxContent>
  </ComboboxRoot>
</template>

📊 性能优化对比

组件	2.0.x 版本	2.1.0 版本	提升幅度
Combobox	1000项 200ms	1000项 50ms	75%
NavigationMenu	动画卡顿	流畅动画	60%
打包大小	45KB	42KB	7%

🔧 迁移指南

表单组件 v-model 统一

<!-- 2.0.x -->
<script setup>
import { CheckboxRoot } from 'reka-ui'

const checked = ref(false)
</script>

<template>
  <CheckboxRoot :checked="checked" @update:checked="checked = $event" />
</template>

<!-- 2.1.0 -->
<script setup>
import { CheckboxRoot } from 'reka-ui'

const checked = ref(false)
</script>

<template>
  <CheckboxRoot v-model="checked" />
</template>

Popover ARIA 属性更新

ARIA 属性命名更加规范，建议检查现有代码：

<!-- 更新前 -->
<PopoverRoot aria-popover="true">

<!-- 更新后 -->
<PopoverRoot aria-modal="true">

🎯 安装与使用

安装命令

# 使用 pnpm
pnpm add reka-ui @internationalized/date

# 使用 npm
npm install reka-ui @internationalized/date

# 使用 yarn
yarn add reka-ui @internationalized/date

基础使用示例

<script setup>
import { DatePickerRoot, DatePickerInput } from 'reka-ui'
import { parseDate } from '@internationalized/date'

const selectedDate = ref(parseDate('2024-01-15'))
</script>

<template>
  <DatePickerRoot v-model="selectedDate">
    <DatePickerInput />
  </DatePickerRoot>
</template>