Vuetify 4.2 月度更新全解读Select 家族交互升级、vuetify/v0 运行时依赖与 Sass 变量清理【免费下载链接】vuetify Vue Component Framework项目地址: https://gitcode.com/gh_mirrors/vu/vuetify2026 年 8 月的核心是 Vuetify 4.2 版本的发布框架代码库合并了 33 个 PR发布 8 个版本其中最引人注目的变化是自 4.2 起vuetify将vuetify/v0作为运行时依赖引入。本文基于仓库内 august-2026-update.md 官方月度更新文档结合 Vuetify 源码 逐项拆解 VSelect/VAutocomplete/VCombobox 的新交互能力、嵌套 defaults 配置、Sass 变量清理的升级影响以及 Vuetify0 1.2 与 MCP 工具链的最新进展帮助你在升级到 4.2 前后做到心中有数。八月概览数字背后的版本节奏文档给出了 8 月的整体工作量统计框架仓库合并33 个 PR其中包含16 个新特性与 47 个修复按独立提交计共发布8 个版本issue 数量从 351 降至 286关闭 96 个、新增 31 个。同期 Vuetify0 合并 163 个 PR33 特性、42 修复、62 文档发布 5 个版本以v1.2.0为代表。版本节奏一览对应官方发布说明见 release-notes.md版本线本次发布的版本Vuetify 4.2v4.2.0-beta.08 月 27 日、v4.2.0 稳定版9 月 2 日Vuetify 4.1 补丁线v4.1.8 ~ v4.1.12 共五个补丁Vuetify 3 LTSv3.13.1、v3.13.2 首批两个 LTS 补丁Vuetify0v1.0.3、v1.0.4、v1.0.5、v1.1.0发布事故、v1.2.0SpotlightVuetify 4.2 是什么v4.2.0 是 v4 主线的第二个 minor 版本汇集了自 6 月以来合入dev分支的全部内容包括 july-2026-update.md 中预告过的多选事件、VSkeletonLoader类型、VBtnGroup 的size、VTreeview 键盘导航与无障碍改进等此外validation rules正式离开 Labs详见 rules.md。在了解新特性之前文档特别列出三项不是新 prop、但影响升级的破坏性变化。升级前须知一vuetify/v0成为正式依赖4.2 之前vuetify没有任何直接依赖从 v4.2.0 起框架声明依赖vuetify/v0^1.2.1。这一点可以直接在仓库的 packages/vuetify/package.json 中得到印证vuetify/v0: ^1.2.1。目前框架消费 v0 的范围还很小集中在安全且简单的工具函数上。仓库中的 packages/vuetify/src/util/v0.ts 明确展示了这条桥接层的边界——它从vuetify/v0/utilities重新导出isString、isObject、isArray、isFunction、isNumber等类型判断以及被重命名为createRange的range注释说明保持核心原有名称是因为range会在 VPagination、VRating、VSlider 等组件中遮蔽局部变量。文件头部的注释还写道随着更多 v0 功能在 4.x minor 中被采用继续扩展此文件。另一个已接入 v0 的实例是 packages/vuetify/src/labs/VHighlight/VHighlight.tsx它直接import { toHighlight } from vuetify/v0使用toHighlight转换器。可以预见v0 将逐步接管 Vuetify 代码库中越来越多的职责。升级前须知二Sass 变量清理v4.2.0 移除了39 个组件中声明过但从未被任何样式表读取的 125 个 Sass 变量。这些变量即便被设置也不产生任何效果清理后彻底明确了它们从来不属于 v3/v4 的 API 范畴。如果你的settings.scss恰好定义了这些变量编译器会报错提示移除Error: This variable was not declared with !default in the used module.完整的变量清单维护在专门的页面 unused-sass-variables.md升级前务必对照自查。升级前须知三按钮裁剪 overlayVBtn 和 VIconBtn 现在设置了overflow: hidden因此悬停 overlay 与 tonal 底层在配合粗边框时不再出现缝隙。但副作用是放在按钮内部的 VBadge 可能被裁剪。文档给出了提示——社区至少提出了 3 种简单解决方案可根据项目情况任选其一对应 issue #23179。框架新特性详解均已随 v4.2.0 发布Select 家族VSelect / VAutocomplete / VCombobox 的四个新增能力1. 持久菜单persistent menus。通过:menu-props{ persistent: true }保持菜单开启closeOnContentClick: false让选择后菜单不关闭。这两个行为此前是被忽略的。2. VCombobox 的trim-values。修剪输入值的首尾空白并丢弃纯空白条目。3.open-on-focus。字段获得焦点无论来自 Tab 还是点击时打开菜单菜单关闭后焦点返回字段时不会再次打开。VDateInput 和 VColorInput 也拥有同名 prop。该能力由 VSelect 家族通过useOpenOnFocus组合式函数实现——在 packages/vuetify/src/composables/openOnFocus.ts 中可以看到其核心逻辑它同时监听menu与isFocused用returningFocus标记区分焦点自然回归与新焦点进入从而避免菜单反复开关。VSelect 的 prop 声明位于 packages/vuetify/src/components/VSelect/VSelect.tsx并经由 useSelectionMenu.ts 接入配套浏览器测试见 VSelect.spec.browser.tsx。4. VAutocomplete / VCombobox 的close-on-input-click。点击输入框改为切换菜单开合而不是总是打开适合习惯了点击输入框关闭/切换菜单的终端用户。后两项组合使用的典型配置v-autocomplete :itemscountries :menu-props{ closeOnContentClick: false } open-on-focus close-on-input-click /此外这些菜单的键盘导航围绕虚拟列表virtual list做了重构此前任何超过 50 项的长列表都会出现键盘导航失灵的问题对重度依赖键盘的表单应用影响尤其明显对应 issue #18383、#22770。内部控件的嵌套 Defaults 配置部分组件会以硬编码 props 渲染内部控件VSelect 中的 chip 固定为sizesmallVStepperActions 的按钮固定为text与tonal数据表底部的每页条数选择器使用固定 variant。过去想定制只能靠深度 CSS 覆盖或改用插槽现在通过标准配置系统以嵌套对象结构即可完成createVuetify({ defaults: { VSelect: { VChip: { size: large } }, // also VAutocomplete, VCombobox, VFileInput VStepperActions: { VBtn: { variant: outlined } }, VDataTableFooter: { VSelect: { variant: solo-filled } }, }, })完整的嵌套键清单含新增的VStepperActionsPrevBtn、VStepperActionsNextBtn角色名见 global-configuration.md。VDateInput像掩码输入一样打字VDateInput 现在按照掩码输入的方式工作用户输入时分隔符会自动插入/强制并遵循当前 locale、范围格式与 RTL 方向同时保证不会输入非法日期。v4.3.0 还会继续改进——输入框将显示本地化占位符这是一项重要的 i18n 增强。VSlideGroup四个长期 issue 一并关闭scroll-snap取值start/center/end启用 CSS 滚动吸附前后箭头会停在条目边界上scroll-distance设置箭头每次滚动的距离支持像素或百分比暴露slide()方法支持编程式滚动三种调用形式slide(next)、slide({ by: 200 })、slide({ index: 3 })edge事件滚动到达任一端时触发载荷为start或end。以上能力在源码中均可验证packages/vuetify/src/components/VSlideGroup/VSlideGroup.tsx 定义了scrollDistance默认100%带正则校验与scrollSnap枚举校验start/center/endedge事件在 emits 中声明VSlideGroup.sass 中可以看到scroll-snap-type与--v-slide-group-snap-align变量的实现。进度条组件与其余小特性VProgressLinear 与 VProgressCircular新增transitionpropfalse关闭数值动画{ duration: 600 }放慢动画同时 VProgressLinear 新增revealprop与圆形进度条对齐。其余补充VNavigationDrawerwidth支持百分比VRadio脱离 VRadioGroup 时v-model也可正常工作VFileInput支持placeholder与persistent-placeholder拖拽文件悬停时显示虚线轮廓VVirtualScrollscrollToIndex(index, position)新增第二参数取值start/center/end。Bug Fixes八月修复清单八月的修复集中在 overlay、虚拟滚动与 Select 家族。三件值得细读从菜单打开的对话框点击从 VMenu 打开的 VDialog 内部曾导致整条菜单链关闭issue 可追溯至 2024 年。现在非菜单 overlay 会阻止关闭级联自定义 overlay 与 tooltip 也不再阻止菜单关闭。Android桌面版网站模式overlay 在该模式下能正确定位自 v4.1.8 / v3.13.1 起使用 CSSzoom的页面自 v4.2.1 起也恢复正常。刷新时链接误高亮Nuxt 中带to的链接在硬刷新、路由仍在解析首次导航时可能闪现为激活态已修复。其余按版本归类的完整修复表随文档完整收录ComponentFixVersionVNumberInputStrip the grouping separator before parsing (German locale)v4.1.8themeEmitcolor-scheme: lightso native scrollbars follow a theme switchv4.1.8VFileUploadNo SSR crash with an empty file listv4.1.8packageAccept Vue 3.6 prereleases in the peer rangev4.1.8roundedRestore classes for per-side values containing0v4.1.9validationRun rules as soon as a field is cleared, not on blurv4.1.9VDataTableVirtualCorrect height with several expanded rows per itemv4.1.9VSelectFocus the right item when opened with the keyboard in Shadow DOMv4.1.9VDataTableKey cells so slot props dont leak between columnsv4.1.10VNumberInputSpin buttons snap an out-of-range value tomin/maxv4.1.10VDialogNo error when unmounted while closingv4.1.10VProgressLinearKeep indeterminate bars visible in Firefoxv4.1.10VProgressLinearRestore thesplitvariant animation, broken in v4.1.7v4.1.10VDatePickerRestore the hover preview in range selectionv4.1.10VOverlayReturn focus to the activator wheneagerv4.1.10VBtn / VDivider / VImgNovalueon links, no redundantroleonhr, no emptyaria-labelv4.1.10VVirtualScrollMeasure dividers and subheaders, estimate item height by medianv4.1.11VVirtualScrollScrolling no longer locks up when items contain a dividerv4.1.11VRowRestore 8px gutters fordensev4.1.11VOverlayCorrect position when the activator changes mid-transitionv4.1.12VProgressLinearrounded-barwithreverseand bufferv4.1.12localeUkrainian translation fixes, missing Arabic keysv4.1.12VIconBtnDefault color matches VBtn (icons disappeared on colored backgrounds)v4.2.0VMenuOne open submenu per level; Tab and ArrowLeft return focus to the activatorv4.2.0VTextFieldKeep caret and selection when togglingtypein Chromev4.2.0VTreeviewOpen matching nodes when searchingv4.2.0VInputConsistent transitions for messages, details and counterv4.2.0v-touchIgnore scrolling inside the elementv4.2.0VSlideGroupA click on a partially visible item selects it instead of scrolling itv4.2.0其中 VTextField 的修复直接覆盖了密码显示场景从append-inner图标切换type时光标此前会被重置到开头——这个 issue 自 2022 年就存在。In Development未赶上 4.2 的候选特性七月亮相预告的六个 4.2 候选 PR 全部未进入 4.2VSliderpill、VMaskInput 动态掩码、VTimePicker 键盘控制、VBtn/VIconBtn 的 MD3 尺寸、VDatePicker 周选择、VFieldborderprop。其中三个VSlider、VMaskInput、VDatePicker连同 VBreadcrumbs 无障碍 PR 一起移入v4.3.0里程碑其余三个暂无目标版本。Vuetify0 进展v1.2.0 与设计系统Vuetify0 在 8 月经历了一次发布工具事故v1.1.0 提前一小时发布了部分内容随后被 v1.2.08 月 25 日完整包含。1.2 的新内容DataTable 与 DataGrid基于createDataTable/createDataGrid的无头复合组件。DataTable 渲染带aria-sort、aria-rowcount的语义化tableDataGrid 额外支持列固定、列宽调整、单元格编辑与行合并。Alert默认是rolealert的 live region不需要打断用户的提示可改用rolestatus。usePopover 定位适配器CSS anchor positioning 仍是默认方案但 Firefox ESR 与 Safari 26 之前的版本不支持因此新增了官方 floating-ui 适配器位于vuetify/v0/popover/adapters/floating-ui以floating-ui/dom为 peercreatePopoverPlugin可为整个应用设置适配器。useThemesystem: { light, dark }在用户手动选择主题前跟随prefers-color-scheme。persist选项createFeaturesPlugin只持久化用户改动过的标志createNotificationsPlugin只持久化已读/已见/归档/稍后提醒状态绝不保存内容。NumberFieldcommitOn: input每次按键都写入 model钳制clamping延迟到 blur 时执行同一 PR 还顺带修复了NumberField.Root不传:clamptrue时完全不钳制的问题。修复useDate修复了 Firefox 中所有 locale 都是周日作为一周开始、以及 Node 与浏览器 ICU 版本不一致导致服务端/客户端数据分歧的问题现在所有运行时统一使用 CLDR 48 的周数据。这对 Vuetify 同样重要因为框架的日期组合式函数正在迁移到 v0。getActiveElement()会穿过开放的 shadow root与 Vuetify 七月对 Shadow DOM 的修复一致useHotkey、useClickOutside、useDragDrop均使用它。SnackbarNVDA 会跳过注入到全新rolestatus区域的 toastSnackbar.Portal现在渲染持久的 polite/assertive live region 并将每个 toast 镜像进去。AlertDialog按 APG 模式在打开时聚焦 Cancel 操作。基于 v0 的设计系统Emeraldpaper/emerald0.1.0带样式的设计系统含 28 个组件族、源自 Figma 的 design token、跟随操作系统的明暗主题以及按角色区分的图标集提供 live demo 与 Figma UI kit。Bulmapaper/bulma0.1.0反其道而行——组件渲染 Bulma 文档规定的 markup配合你已经在加载的bulma.css补上 Bulma 从未拥有的 JavaScript 行为打开状态、click-outside、Escape、焦点与表单接线且不附带任何 CSS。此外 v0 playground 支持将 playground 保存到 Vuetify One并能切换 Vuetify 版本含 nightly 版本。工具链更新Vuetify MCP8 月发布四个版本v0.9.0、v0.9.18 月 13 日、v0.10.08 月 27 日、v0.11.08 月 28 日。托管服务器新增两个端点URL认证工具https://mcp.vuetifyjs.com/mcp无docs、API、issueshttps://mcp.vuetifyjs.com/oneOAuthVuetify One上述全部另加 bins、playgrounds、linksv0.11.0 新增面向Vuetify 2 → 3目标 3.13 LTS的升级工具包get_v3_upgrade_playbook分阶段执行从 Playwright 基线开始、get_v2_to_v3_component_map、get_v3_breaking_changes以及upgrade-v2-to-v3prompt。此前get_upgrade_guide(v2.7)会错误地返回 v4 指南同时 v3 升级指南也配套了 MCP 快速开始说明。Vuetify CLI八月无发布但两个特性已合入等待下个版本vuetify add从文档注册表复制 v0 示例到项目并在vuetify.json中追踪支持对源做diff和refreshcreate --featuresmcp会为 Cursor、Claude Code、Grok 写入指向托管服务器的客户端配置。Nuxt Modulev1.0.0-rc.48 月 2 日与 rc.58 月 22 日为依赖更新Nuxt 4.5.1并记录了useLayout自动导入冲突的解决方案。升级指南补充两个来自真实生产迁移的 v3 → v4 问题被记录进文档其一Vite dev 模式下依赖预打包器可能创建两个useStack实例导致菜单在对话框内被遮挡解决方案是optimizeDeps.include其二深入剖析了layer顺序这一升级老项目时常见的摩擦点。SnipsSnips 价格腰斩且无截止日期分类包 $74、全量访问 $149、团队全量访问 $399。Whats Next接下来看什么v4.2.0 于 9 月 2 日转正v4.2.1 于 9 月 9 日跟进发布。官方对接下来三个月的展望Vuetify 4.2 已稳定安装时会一并带上vuetify/v0Vuetify0 1.2带来无头 DataTable、DataGrid 与 Alert托管 MCP在https://mcp.vuetifyjs.com/mcp无需账号即可使用未赶上 4.2 的三个 PR 已排入 v4.3.0 里程碑更多 v0 能力将在后续 4.x minor 中逐步进入框架。给升级者的三个建议如果你自定义过 Sass 变量请先对照 unused-sass-variables.md 清理如果你把 VBadge 放在按钮内注意overflow: hidden带来的裁剪问题如果你重度使用 Select 家族务必体验open-on-focus、close-on-input-click与持久菜单的组合效果。完整月度发布信息可继续阅读仓库中的 release-notes.md 与 global-configuration.md相关交互实现的源码与测试分别位于 packages/vuetify/src/components/VSelect 与 packages/vuetify/src/components/VSlideGroup。【免费下载链接】vuetify Vue Component Framework项目地址: https://gitcode.com/gh_mirrors/vu/vuetify创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
