watchEffect天然支持多响应式变量同步响应，自动追踪回调中读取的所有依赖，任一变化即重执行并获取最新值，无需手动声明依赖数组，但不提供旧值且需避免解构等监听失效写法。
watchEffect 天然支持多个响应式变量的同步变化处理，不需要额外包装或手动声明依赖列表——只要在回调函数里读取了它们，就会自动追踪并响应任意一个的变化。
自动收集所有被访问的响应式依赖
watchEffect 在首次执行回调时，会扫描内部所有对响应式数据的读取操作（比如 searchKey.value、form.status、user.profile.name），并将这些访问路径注册为依赖。任一依赖更新，整个回调就重新运行，且所有值都是当前最新快照。
- 无需写
[a, b, c]数组传参，也不用担心顺序对齐问题 - 支持 ref、reactive 对象属性、computed 等各类响应式源
- 若某变量在条件分支中才被读取（如
if (show) console.log(count.value)），则只在条件为真时才纳入追踪
适合联合触发副作用的场景
当多个变量共同决定一个副作用行为（如搜索请求、UI 状态切换、动画触发）时，watchEffect 写法更直观、不易出错。
蓝湖代码转vue2.0+element-ui
下载
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
- 每次执行都拿到全部最新值，可直接用于联合计算或参数拼装
- 例如同时依赖关键词、筛选类型和页码发起查询，三者任一变化就重发请求
- 不提供旧值，因此不适合需要精确比对“哪个字段变了”的逻辑
注意避免监听失效的常见写法
响应式链路一旦断裂，watchEffect 就无法感知变化。以下情况会导致监听失效：
- 对 ref 解构后使用：❌
const { value } = searchKey; console.log(value)→ 应改为 ✅console.log(searchKey.value) - 仅访问 reactive 对象本身而未读属性：❌
console.log(form)→ 应改为 ✅console.log(form.name, form.email) - 在非响应式上下文中间接读取（如传入普通函数再读取）
对比 watch 数组方式的关键差异
如果你需要区分变化来源、保留旧值做比对、或控制首次是否执行，watch 更合适；如果只是“有变就干活”，watchEffect 更轻量。
- watchEffect 默认立即执行一次，watch 需显式加
{ immediate: true } - watchEffect 回调无参数，watch 的回调接收新旧值数组，索引严格对应监听项
- watch 支持
deep、flush、onTrack等精细配置，watchEffect 仅支持flush和onTrack等少数选项
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
