Vue 3 中 watch 和 watchEffect 在异步请求场景下的竞态问题与处理
在 Vue 3 项目里用 watch 或 watchEffect 监听响应式数据并触发异步请求,是很常见的操作。比如搜索框输入关键词、切换分页或筛选条件时,自动去后端拉取列表数据。但很多人会碰到这样的情况:快速连续输入时,页面上显示的搜索结果和输入框里的关键词对不上,或者后一次请求先返回、前一次请求后返回,把新数据覆盖成了旧数据。这类问题的根源是异步请求的返回顺序无法保证,而 watch 本身不会自动取消上一次未完成的请求。下面结合实际代码,聊聊怎么利用 AbortController、请求标识和 onCleanup 来避免这种竞态,同时也会涉及 watch 与 watchEffect 在这类...