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

[lemooljiang]

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

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

设计搜索组件

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

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

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

// 示意代码
<script setup>
const route = useRoute()
const keywords = ref(route.query.keywords)
const getData = async () => {
  history.value = []
  firstLoadingFlag.value = true
  moreFlag.value = false
  const { data, pending, error } = await getHttp("/hiveapi/search/?keywords="+keywords.value)
  ...
}
watch(()=>route.query.keywords,(newVal)=>{
    keywords.value = newVal
    getData()
}, {flush: 'pre', immediate: true, deep: true})
</script>