在个人主页中增加搜索组件，本以为是个简单的活，但没想到，却被卡中了，硬生生耗费了数个小时！
其中的难题是：每次输入搜索时，得到的数据都要即时渲染到页面，就这个“即时”卡了半天。
设计搜索组件
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>