如何用 watchEffect 实现根据参数自动获取数据？代码简化干货-Vue.js-PHP中文网

用 watchEffect 实现参数变化自动重拉，核心是将请求逻辑写在回调中并直接读取响应式依赖（如 route.params.id、searchKey.value），Vue 自动追踪；需封装请求函数但不可提前解构响应式值；可同步控制 loading/error 状态，并通过 AbortController 防抖与取消请求。

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

用 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：

watchEffect(async (onInvalidate) => {
  const pending = loadData();
  onInvalidate(() => {
    // 可选：取消上一次请求（配合 AbortController 或 cancel token）
  });
  await pending;
});

处理 loading 和错误状态更自然

因为 watchEffect 是同步注册、异步执行，你可以在回调开头设 loading.value = true，结束时关掉——整个流程完全受控，不依赖额外的副作用管理。

watchEffect(async () => {
  loading.value = true;
  error.value = null;
  try {
    data.value = await api.getList(route.query.category, search.value);
  } catch (e) {
    error.value = e.message;
  } finally {
    loading.value = false;
  }
});