Nuxt4中的搜索组件和即时渲染页面 / 网络研习社#91

@lemooljiang · 2025-08-28 14:43 · HIVE CN 中文社区

个人主页中增加搜索组件,本以为是个简单的活,但没想到,却被卡中了,硬生生耗费了数个小时!

其中的难题是:每次输入搜索时,得到的数据都要即时渲染到页面,就这个“即时”卡了半天。

search.jpg 设计搜索组件

Nuxt的即时性自是没问题,第一次搜索也是没问题,但涉及多次搜索时就无法即时渲染啰!

刚开始想到的是computedwatch这两个方法,都试了试,还是没有解决。没得法,只能再找来相关的资料,逐行理解。欠下的技术债终究是要还嘀。

最终解决方案如下: 把搜索页的逻辑写在一个获取函数(getData)中 -> watch 监听route.query的变化 -> 调用获取函数,渲染页面。这样整个逻辑就是即时渲染的。

// 示意代码

#cn #cn-reader #miao #network-institute #web3 #nuxt #search #page
Payout: 0.000 HBD
Votes: 42
More interactions (upvote, reblog, reply) coming soon.