intermediate
Watchers
Use watch and watchEffect to react to state changes.
import { ref, _____, watchEffect } from 'vue'
export function useSearch() {
const query = ref('')
const results = ref<string[]>([])
const isLoading = ref(false)
const searchHistory = ref<string[]>([])
// Watch query changes and update history
watch(_____, (newQuery, oldQuery) => {
if (newQuery && newQuery !== oldQuery) {
searchHistory.value.__________...
}
})
// Simulated search function
async function performSearch(q: string): Promise<string[]> {
await new Promise(r => setTimeout(r, 100))
return [`Result 1 for ${q}`, `Result 2 for ${q}`]
}
// Watch with async handler
watch(query, async (newQuery) => {
if (!newQuery) {
results.value = []
return
}
__________...
results.value = await performSearch(newQuery)
isLoading.value = false
})
return { query, results, isLoading, searchHistory }
}0/4 filled tab moves · Ctrl+↵ submits · Ctrl+Shift+↵ runsstarter code