Vue3+Vuetify3中v-select/v-autocomplete遇长文本崩溃问题求助

问题说明 #

• 环境：Vue v3.3.8、Vuetify v3.3.23（从Vue2/Vuetify2升级）
• 触发情况：
  • 组件包含长文本选项，点击展开选择列表时触发崩溃
  • 浏览器窗口调至极窄，短文本选项也会触发崩溃
• 错误提示：ResizeObserver loop completed with undelivered notifications
• 已尝试操作：升级更高版本Vuetify，但引发其他异常问题

临时抑制方案（仅隐藏错误） #

通过修改vue.config.js配置，忽略指定的Runtime错误，避免页面崩溃。该方案仅屏蔽错误提示，未彻底修复问题，但目前无页面副作用：

devServer: {
  // 隐藏ResizeObserver相关循环错误
  client: {
    overlay: {
      runtimeErrors: (error) => {
        const ignoreErrors = [
          "ResizeObserver loop limit exceeded",
          "ResizeObserver loop completed with undelivered notifications.",
        ];
        if (ignoreErrors.includes(error.message)) {
          return false;
        }
        return true;
      },
    },
  },
},

永久修复方向 #

1. 优化组件尺寸监听逻辑
   该错误源于组件内部ResizeObserver在文本换行、容器尺寸变化时触发循环回调。可定位v-select/v-autocomplete的下拉菜单文本处理代码，做以下调整：

   • 给ResizeObserver回调添加防抖处理，避免短时间内重复触发尺寸计算
   • 缩小监听范围，只监听必要的容器元素，减少不必要的回调触发

2. 自定义组件封装规避问题
   对v-select/v-autocomplete做二次封装，手动处理长文本显示（如截断+tooltip），从根源减少容器尺寸的频繁变化：

   <template>
     <v-select
       v-bind="$attrs"
       v-on="$listeners"
     >
       <template #item="{ item }">
         <div class="truncate-text" :title="item.text">
           {{ item.text }}
         </div>
       </template>
     </v-select>
   </template>
   <style scoped>
   .truncate-text {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
   </style>
   

3. 等待官方补丁
   该问题属于Vuetify组件的兼容性问题，可关注Vuetify官方Issue追踪修复进度。若无法直接升级最新版，可尝试提取对应修复commit的代码，合并到当前使用的版本中。

内容的提问来源于stack exchange，提问作者Toby Fieldgroove