watcheffect 适合在数据变化时立即触发副作用，包括发起异步请求，但需将结果存入响应式变量（如 ref）才能实时响应；它默认立即执行、自动追踪响应式依赖、支持 oninvalidate 清理竞态请求，并可通过 flush: 'post' 确保 dom 更新后执行回调。
watchEffect 适合在数据变化时立即触发副作用，包括发起异步请求，但它本身不直接“响应请求返回的数据”，而是响应它内部读取的响应式状态变化。真正实现“实时响应异步请求结果”的关键，在于把请求结果存入响应式变量（如 ref），让 watchEffect 自动追踪该变量——而不是去监听 Promise 或 await 结果本身。
watchEffect 如何触发异步请求
它不能直接 await 请求，但可以触发一个包含异步逻辑的函数。常见写法是：在副作用函数中调用 API，并将结果赋值给响应式数据，后续依赖该数据的其他逻辑（比如另一个 watchEffect 或模板渲染）自然响应。
- watchEffect 默认立即执行一次，因此首次加载就能发请求
- 它自动追踪函数体内访问的所有响应式依赖（例如 ref、reactive 的属性），但不会追踪 Promise 实例或未赋值的临时变量
- 请求成功后，必须把结果写入响应式对象（如
data.value = res），否则 watchEffect 不会因“请求完成”而再次运行
正确绑定请求与响应式状态
错误做法是只在 watchEffect 里 fetch 却不更新状态；正确做法是把请求结果同步到 ref，形成可被追踪的响应链：
- 定义
const data = ref(null)和const loading = ref(false) - 在 watchEffect 中修改它们：
loading.value = true; data.value = await api.get(...); loading.value = false - 这样，
data变化会触发其他依赖它的逻辑（如另一个 watchEffect 或 computed），实现“请求完成 → 视图更新”的闭环
处理竞态问题：用 onInvalidate 清理过期请求
用户快速输入时，前序请求可能后返回，覆盖新结果。watchEffect 提供 onInvalidate 回调，在下一次执行前自动清理上一轮副作用：
- 传入函数接收
onInvalidate参数，内部创建 AbortController - 在 onInvalidate 里调用
controller.abort()，中断上一个 pending 请求 - 注意：AbortController 需配合
fetch({ signal })使用，且onInvalidate在副作用重新执行或侦听器停止时触发
控制执行时机：flush 选项决定 DOM 可见性
若请求完成后需操作更新后的 DOM（如滚动定位、测量尺寸），默认 flush: 'pre'（更新前）无法获取最新 DOM。此时应：
- 使用
{ flush: 'post' }，确保回调在组件更新、DOM 渲染完毕后执行 - 等价于直接使用
watchPostEffect，语义更清晰 - 避免在
flush: 'sync'下频繁触发，尤其涉及大量 DOM 操作时，易引发性能问题
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
