性能优化 - Element-Plus el-select 报错 Maximum recursive updates exceeded?

Question

当使用element-plus的el-select的filterable时控制台出现Maximum recursive updates exceeded in component <ElSelect>. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.
的报错，出现此问题的前提是el-select渲染的数据量较大，少量数据是没有此问题

使用filter-method写了自定义筛选方法虽然能解决此问题，但是选中筛选项时，回显较慢，有无其他解决方式

Answer 1

"Maximum recursive updates exceeded" 错误通常是由于 Vue 组件内部存在无限递归的更新循环导致的。在使用 Element Plus 的 el-select 组件，尤其是当数据量较大且启用了 filterable 功能时，这个问题可能会出现。以下是一些建议的解决方案：

1. 优化自定义筛选方法：
   如果你已经使用了 filter-method 来实现自定义筛选，但发现回显较慢，那么可以考虑优化这个筛选方法。确保筛选逻辑尽可能高效，避免不必要的计算或数据处理。
2. 防抖/节流：
   在筛选方法的实现中，你可以使用防抖（debounce）或节流（throttle）技术来限制筛选方法的调用频率。这有助于减少不必要的更新和计算，尤其是在用户快速输入时。
3. 使用计算属性：
   如果筛选逻辑复杂，可以考虑使用 Vue 的计算属性（computed）来缓存计算结果。这样，只有当依赖的数据发生变化时，计算属性才会重新计算，从而避免不必要的更新。
4. 限制渲染数据量：
   如果数据量真的很大，考虑是否所有数据都需要在 el-select 中渲染。可以考虑分页、虚拟滚动等技术来限制渲染的数据量，从而提高性能。
5. 使用 v-show 替代 v-if：
   在 el-select 的子元素中，如果可能，尽量使用 v-show 替代 v-if。v-show 只是简单地切换元素的 CSS 的 display 属性，而 v-if 会销毁和重建 DOM 元素，这可能会导致性能问题。
6. 检查其他组件和逻辑：
   确保没有其他 Vue 组件或逻辑在无意中触发 el-select 的递归更新。例如，确保没有监听 el-select 的值变化，并在变化时又更新了 el-select 的数据源。
7. 升级 Element Plus：
   确保你使用的是 Element Plus 的最新版本。有时候，这类问题可能是库本身的 bug，而开发者可能已经在新版本中修复了这个问题。
8. 考虑其他 UI 库或自定义实现：
   如果问题依然存在且严重影响性能，你可能需要考虑使用其他 UI 库，或者完全自定义实现下拉选择框组件。

请注意，没有具体的代码和上下文信息，以上建议可能需要根据实际情况进行调整和优化。如果问题仍然无法解决，建议提供更详细的代码和场景，以便更准确地定位和解决问题。