watcheffect 不侦听异步结果，只追踪同步访问的响应式依赖；需在 await 后手动赋值 ref，才能触发更新。典型用于关键词搜索等响应式驱动的异步场景。
watchEffect 本身不直接“侦听异步操作结果”，而是自动追踪其内部同步执行的响应式依赖；若想在异步操作（如 API 请求）完成后更新状态，需把异步逻辑放在 watchEffect 内部，并用 await 或 .then() 显式处理，同时确保更新状态的操作发生在响应式上下文中。
watchEffect 如何感知异步中的响应式数据变化
watchEffect 在首次执行时会收集它**同步访问过**的响应式属性（如 ref、computed）。但 await 后的代码属于微任务，此时依赖已收集完毕，不会被自动追踪。因此，不能靠 watchEffect 自动“监听”异步返回值本身——必须手动赋值更新一个响应式变量，再让其他逻辑去读这个变量。
- ✅ 正确做法：在 await 后给 ref 赋新值，后续使用该 ref 的地方（如模板或 computed）会自动更新
- ❌ 错误理解：以为 watchEffect 会像 watch({ immediate: true }) 那样“监听 promise 状态变化”
典型用法：请求参数变化时自动触发并更新结果
适用于搜索关键词、筛选条件等受响应式变量驱动的异步场景：
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章