Vue 响应式侦听如何结合 watchEffect 自动同步路由参数的变化

watchEffect 可自动追踪路由参数变化并立即执行，无需手动指定依赖或配置 immediate；正确写法是直接在回调中读取 route.params.id 等响应式属性，避免提前解构；配合 AbortController 的 onInvalidate 可取消旧请求，且 loading/error 状态可在同一副作用内集中管理。

用 watchEffect 自动同步路由参数变化，核心在于“不手动指定依赖、靠读取自动追踪”，它天然适合“一进页面就拉数据，参数一变就重拉”这类场景。相比传统 watch，它省去写路径字符串和配置 immediate: true 的步骤，逻辑更紧凑、不易出错。

直接读取 route 参数，Vue 自动追踪

在 setup 中调用 useRoute() 获取路由对象后，只要在 watchEffect 回调里访问 route.params.id 或 route.query.keyword，Vue 就会把它当作响应式依赖监听：

1. ✅ 正确写法：在回调内实时读取 route.params.id —— 会自动响应变化并重新执行
2. ❌ 错误写法：提前解构赋值，比如 const { id } = route.params，再用 id —— 这个 id 是普通字符串，失去响应性

首次加载 + 变化重拉，一步到位

watchEffect 默认挂载时立即执行一次，无需额外判断或手动调用请求函数。例如用户从 /user/1 切到 /user/2，只要回调里写了 api.getUser(route.params.id)，就会自动触发两次请求：

1. 第一次：组件创建后立刻执行，拉取 /user/1 的数据
2. 第二次：路由跳转后，route.params.id 更新，watchEffect 自动重跑，拉取 /user/2 的数据

配合 AbortController 防止请求堆积

当 query 频繁变动（比如搜索框输入），上一个请求可能还没返回，新请求已发出。用 onInvalidate 清理上一次请求可避免状态错乱：

1. 在 watchEffect 回调开头新建 AbortController
2. 把 controller.signal 传给 fetch
3. 调用 onInvalidate(() => controller.abort())，Vue 会在下一次执行前自动取消上一轮请求

同步控制 loading 和 error 状态

因为整个逻辑都在一个副作用函数内，loading 和 error 的切换非常自然：

1. 回调开始设 loading.value = true
2. try/catch 中更新 data.value 或 error.value
3. finally 里关掉 loading.value = false
4. 不需要分散到 mounted、watch、methods 多处维护状态