当前位置：首页 > 科技 > 软件

Vue3 中如何做高性能的拼音搜索，提高用户体验？

来源：责编：时间：2024-05-24 17:25:20 132观看

导读下拉框搜索最近页面中需要一个下拉框，并且支持搜索功能（搜索选项文本和拼音），这是一个挺普通的小功能，代码如下：request.ts 先准备一些假的下拉框数据，并模拟请求：图片Index.vue 中进行请求，并渲染下拉框，配置一些属性，支持搜索

下拉框搜索

最近页面中需要一个下拉框，并且支持搜索功能（搜索选项文本和拼音），这是一个挺普通的小功能，代码如下：

request.ts 先准备一些假的下拉框数据，并模拟请求：

图片

Index.vue 中进行请求，并渲染下拉框，配置一些属性，支持搜索选项文本：

图片

可以看到实现了搜索文本，但是产品说还得支持搜索拼音呢~可以看到当前是不支持搜索拼音的。

图片

拼音搜索

拼音搜索其实也不难，用一些库即可，比如 pinyin-pro。

pnpm i pinyin-pro

我可以使用 pinyin-pro 这个库，在获取数据的时候为每一项的文本进行拼音翻译，并放到字段 keywords 中。

图片

现在可以看到每一项都有一个 keywords 字段，里面存了每一项的文本和拼音。

图片

接着，在页面中配置一下 Select 的搜索过滤函数。

图片

现在就支持了文本搜索和拼音搜索了。

图片

多个下拉框拼音搜索

上面例子是只有一个，那如果有多个下拉框呢？比如有两个下拉框，我准备了两个下拉框的假数据。

图片

接着在页面中展示两个下拉框：

图片

可以看到两个下拉框的拼音数据耗时情况，其实当时页面上不止两个下拉框，大概有十几个下拉框，且数据都很巨大，如果每一个下拉框都要接近200ms的耗时的话，那用户体验会很不好。

图片

性能优化

根据观察，我发现我这个页面的十几个下拉框其实都有很多下拉项是相同的，这意味着，有一些项存在重复翻译的问题。

就比如这个“放米”，options1翻译过一遍了，options2还翻译一遍，这就导致了性能损耗。

图片

所以其实可以使用缓存来进行优化，思路就是：

1、准备一个对象，key 是文本，value 是拼音

2、每次翻译的时候

先检测对象里是否能匹配到。

能匹配到直接用，不能匹配到才调用 pinyin-pro 进行翻译。

图片

这样的话，能避免文本的重复翻译，从而提升性能，由于 options2 有很多跟 options1 相同的项，所以 options2 很多项的翻译都是直接取缓存的，数据处理的速度大大提升！

图片

其实这种方式也是有局限性的，如果每一个 options 的数据重合度都不高的话，那么这种优化方式也就没啥意义了

所以最好的方式还是叫后端翻译好拼音，传给前端。

类似的场景

其实不止是上面举的例子，还有其他项目中类似的场景，需要用到这种优化方式，比如：复杂的翻译、复杂的数据处理。

例子终究是例子，重要的是能举一反三。

本文链接：http://www.28at.com/showinfo-26-90669-0.htmlVue3 中如何做高性能的拼音搜索，提高用户体验？

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇：来自 Rust 生态的强烈冲击？谈谈 Leptos 在语法设计上的精妙之处

下一篇：分享七个.NET开源、功能强大的快速开发框架

标签：

热门焦点

中兴AX5400Pro+上手体验：再升级双2.5G网口+USB 3.0这次全都有

2021年11月的时候，中兴先后发布了两款路由器产品，中兴AX5400和中兴AX5400 Pro，从产品命名上就不难看出这是隶属于同一系列的，但在外观设计上这两款产品可以说是完全没一点关系
vivo TWS Air开箱体验：真轻臻好听

在vivo S15系列新机的发布会上，vivo的最新款真无线蓝牙耳机vivo TWS Air也一同发布，本次就这款耳机新品给大家带来一个简单的分享。外包装盒上，vivo TWS Air保持了vivo自家产
6月安卓手机好评榜：魅族20 Pro蝉联冠军

性能榜和性价比榜之后，我们来看最后的安卓手机好评榜，数据来源安兔兔评测，收集时间2023年6月1日至6月30日，仅限国内市场。第一名：魅族20 Pro好评率：95%5月份的时候魅族20 Pro就是
一加首款折叠屏！一加Open渲染图出炉：罕见单手可握小尺寸

8月5日消息，此前就有爆料称，一加首款折叠屏手机将会在第三季度上市，如今随着时间临近，新机的各种消息也开始浮出水面。据悉，这款新机将会被命名为“On
三言两语说透柯里化和反柯里化

JavaScript中的柯里化(Currying)和反柯里化(Uncurrying)是两种很有用的技术，可以帮助我们写出更加优雅、泛用的函数。本文将首先介绍柯里化和反柯里化的概念、实现原理和应用
一个注解实现接口幂等，这样才优雅！

场景码猿慢病云管理系统中其实高并发的场景不是很多，没有必要每个接口都去考虑并发高的场景，比如添加住院患者的这个接口，具体的业务代码就不贴了，业务伪代码如下：图片上述代码有
零售大模型“干中学”，攀爬数字化珠峰

文/侯煜编辑/cc来源/华尔街科技眼对于绝大多数登山爱好者而言，攀爬珠穆朗玛峰可谓终极目标。攀登珠峰的商业路线有两条，一是尼泊尔境内的南坡路线，一是中国境内的北坡路线。相
重估百度丨大模型，能撑起百度的“今天”吗?

自象限原创作者｜程心罗辑2023年之前，对于自己的“今天”，百度也很迷茫。“新业务到 2022 年底还是 0，希望 2023 年出来一个 1。”这是2022年底，李彦宏
荣耀Magic4 至臻版首创智慧隐私通话强劲影音系统

2022年第一季度临近尾声，在该季度内，许多品牌陆续发布自己的最新产品，让大家从全新的角度来了解当今的手机技术。手机是电子设备中，更新迭代十分迅速的一款产品，基