type
status
date
slug
summary
tags
category
icon
password
场景还原：下拉框与基础搜索功能
最近在开发一个页面时，遇到了一个需求：实现一个下拉框，并且这个下拉框需要支持搜索功能，用户可以通过输入文本或拼音来筛选选项。这在很多表单场景中是一个非常普遍的功能。
我们先来搭建基础结构。
1. 模拟数据请求 (request.ts)
首先，我们准备一些模拟的下拉框数据，并用一个函数模拟API请求。
(代码示意图)
2. 页面实现 (Index.vue)
在Vue组件中，我们调用这个模拟请求，渲染下拉框（这里以Element Plus的
el-select为例），并配置基础的文本搜索功能。(Vue组件代码示意图)
目前，我们已经实现了基础的按文本搜索功能。但产品经理提出了新需求：还需要支持拼音搜索！
可以看到，当前输入拼音（如"fangmi"）是无法匹配到“放米”的。
(当前文本搜索效果，不支持拼音 - GIF)
进阶需求：实现拼音搜索功能
要实现拼音搜索，我们可以借助现成的JavaScript库，比如功能强大的
pinyin-pro。1. 安装 pinyin-pro
2. 数据处理：为选项添加拼音关键词
我们的思路是，在获取到下拉框数据后，遍历每一项，使用
pinyin-pro 将其 label 文本转换为拼音，并将文本本身和转换后的拼音（全拼、首字母等）存储到一个新的 keywords 字段中。修改
request.ts (或者在获取数据后的处理逻辑中)：(为数据添加keywords字段的代码示意图)
处理后，每条数据会新增一个
keywords 字段，内容类似：“放米 fangmi fm”。(处理后的数据结构示意图)
3. 更新搜索过滤逻辑
现在，我们需要修改
filterOptions 方法，让它在 keywords 字段中进行搜索。(更新后的搜索过滤函数代码示意图)
经过这些修改，我们的下拉框现在完美支持文本和拼音搜索了！
(支持文本和拼音搜索的效果 - GIF)
挑战升级：多个下拉框与性能瓶颈
上面的例子只涉及一个下拉框。如果页面上有多个（比如十几个）需要拼音搜索的下拉框，并且每个下拉框的选项数据量都很大，那么性能问题就可能凸显出来。
假设我们有两个下拉框，
options1 和 options2，它们的数据分别获取并处理。(模拟多个下拉框数据获取的代码示意图)
在页面中渲染这两个下拉框：
(渲染两个下拉框的Vue组件代码示意图)
观察控制台的耗时，如果每个下拉框的拼音翻译处理都需要近200ms，十几个下拉框累加起来，用户首次加载页面或数据更新时可能会感到明显的卡顿。
(多个下拉框拼音处理耗时情况示意图)
性能优化：引入缓存策略
通过仔细观察，我们发现一个潜在的优化点：不同下拉框的选项中，可能存在大量相同的文本项。 例如，“放米”这个选项，在
options1 中翻译过一次拼音，在 options2 中又会重复翻译一次。这种重复计算正是性能损耗的来源之一。(重复翻译问题示意图)
因此，我们可以引入一个缓存机制来优化拼音翻译过程：
- 准备一个全局或模块级的缓存对象（比如一个
Map或普通对象），用于存储已翻译过的文本及其对应的拼音关键词。key可以是原始文本，value是包含拼音的keywords字符串。
- 在对每个选项进行拼音翻译之前：
- 首先检查缓存中是否存在该文本的翻译结果。
- 如果存在，直接从缓存中取用。
- 如果不存在，才调用
pinyin-pro进行翻译，并将结果存入缓存，供后续使用。
我们来修改数据处理逻辑，加入缓存：
(引入缓存后的代码示意图)
通过这种方式，相同的文本项只需要进行一次拼音翻译。如果
options2 中有许多与 options1 相同的项，那么 options2 的数据处理速度将会显著提升，因为大部分翻译可以直接从缓存中获取。(优化后的耗时情况示意图)
重要提示： 这种缓存优化策略的有效性，高度依赖于不同下拉框数据之间的重合度。如果各个下拉框的数据几乎没有交集，那么缓存命中率会很低，优化效果也就微乎其微了。
理想方案： 从长远和根本上解决这个问题，最好的方式还是由后端在提供数据时就处理好拼音字段，直接将包含拼音关键词的数据返回给前端。这样前端无需进行耗时的客户端翻译，用户体验最佳。
举一反三：类似场景的优化思考
本文通过下拉框拼音搜索的例子，展示了客户端数据处理性能优化的一个思路。这种基于“缓存重复计算结果”的思想，同样适用于其他许多前端场景，例如：
- 复杂的文本格式化或国际化翻译：对于相同的输入，缓存其处理结果。
- 大量数据的计算密集型处理：如对列表进行多次特定规则的转换或聚合。
- 频繁调用的纯函数：如果函数对于相同输入总是返回相同输出，可以考虑记忆化（memoization）。
关键在于识别出项目中存在的“重复劳动”，并思考是否能通过缓存来避免不必要的性能开销。
例子终究是例子，重要的是我们能从中学习到解决问题的思路，并能举一反三，应用到更广泛的开发实践中去。
希望本文对你有所启发！如果你有其他关于前端性能优化的好点子或经验，欢迎在评论区分享交流。
- 作者:90_blog
- 链接:https://blog.tri7e.com/article/vue_pingyin2
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
