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 就会把它当作响应式依赖监听：
- ✅ 正确写法：在回调内实时读取
route.params.id—— 会自动响应变化并重新执行 - ❌ 错误写法：提前解构赋值，比如
const { id } = route.params，再用id—— 这个id是普通字符串，失去响应性
首次加载 + 变化重拉，一步到位
watchEffect 默认挂载时立即执行一次，无需额外判断或手动调用请求函数。例如用户从 /user/1 切到 /user/2，只要回调里写了 api.getUser(route.params.id)，就会自动触发两次请求：
- 第一次：组件创建后立刻执行，拉取 /user/1 的数据
- 第二次：路由跳转后，
route.params.id更新，watchEffect 自动重跑，拉取 /user/2 的数据
配合 AbortController 防止请求堆积
当 query 频繁变动（比如搜索框输入），上一个请求可能还没返回，新请求已发出。用 onInvalidate 清理上一次请求可避免状态错乱：
- 在
watchEffect回调开头新建AbortController - 把
controller.signal传给 fetch - 调用
onInvalidate(() => controller.abort())，Vue 会在下一次执行前自动取消上一轮请求
同步控制 loading 和 error 状态
因为整个逻辑都在一个副作用函数内，loading 和 error 的切换非常自然：
- 回调开始设
loading.value = true - try/catch 中更新
data.value或error.value - finally 里关掉
loading.value = false - 不需要分散到 mounted、watch、methods 多处维护状态
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
