如何用 watchEffect 实现根据参数自动获取数据？代码简化干货

用 watchEffect 实现参数变化自动重拉，核心是将请求逻辑写在回调中并直接读取响应式依赖（如 route.params.id、searchKey.value），Vue 自动追踪；需封装请求函数但不可提前解构响应式值；可同步控制 loading/error 状态，并通过 AbortController 防抖与取消请求。用 watchEffect 实现“参数变、数据自动重拉”，核心就一条：把请求逻辑写在 watchEffect 回调里，同时在回调中直接读取响应式依赖（比如路由参数、搜索关键词、筛选状态），Vue 会自动追踪并重新执行。依赖什么，就读取什么watchEffect 不需要手动声明依赖数组，它靠「响应式读取」自动收集。只要你在回调里访问了某个响应式变量（如 route.params.id、searchKey.value），它就会被监听。? 正确：直接读 route.params.id 或 filterStatus.value ? 错误：把参数先存成普通变量再用（会脱离响应式追踪）封装请求逻辑，避免重复代码把 API 调用抽成函数，但注意：函数内部仍要读取响应式变量，不能把值提前解构出来。const loadData = async () => { const id = route.params.id; // ? 在 watchEffect 内实时读取 if (!id) return; data.value = await api.getUser(id);};然后直接传给 watchEffect： 橙篇 百度文库发布的一款综合性AI创作工具