watcheffect自动追踪回调中所有响应式依赖，同步监听多个变量；每次执行获取最新快照值，无需旧值参数，适用于联合推导或副作用触发，但不提供变化来源信息。
watchEffect 本身不区分“多个变量”，它会自动追踪回调函数内部读取的所有响应式依赖，天然支持同步监听多个独立响应式变量——只要它们在回调中被访问到。
watchEffect 如何自动同步多个变量
你不需要显式传入变量列表或做任何包装。只要在回调里用到 .value（ref）或直接访问属性（reactive），watchEffect 就会在任意一个依赖变化时重新执行整个回调，并使用最新值进行计算或副作用操作。
- 每次执行都是“快照式”同步：所有被读取的响应式值都是当前最新状态，无需手动对齐新旧值顺序
- 没有旧值参数，也不提供数组形式的新旧值配对——它只关心“现在是什么”，而非“从什么变来”
- 适合用于需要基于多个变量联合推导、触发请求、更新 DOM 或派生状态的场景
典型写法示例
比如同时依赖搜索关键词、筛选类型和页码发起查询：
import { ref, watchEffect } from 'vue'<br>const searchKey = ref('')<br>const filterType = ref('all')<br>const page = ref(1)<br><br>watchEffect(() => {<br> // 这三行都会被自动追踪<br> console.log('当前搜索条件:', {<br> key: searchKey.value,<br> type: filterType.value,<br> page: page.value<br> })<br> fetchData(searchKey.value, filterType.value, page.value)<br>})
注意边界情况
watchEffect 的同步性依赖于“实际读取”。以下写法会导致监听失效或行为异常：
- 把 ref 解构后使用（如
const { value } = searchKey），再读value—— 此时已脱离响应式链路 - 在条件分支中才读取某个变量（如
if (flag) console.log(count.value)），则该变量仅在 flag 为 true 时才被追踪 - 监听 reactive 对象时未访问具体属性（如只写
console.log(obj)而非obj.name），可能触发浅层更新但无法捕获内部变化
与 watch 数组方式的核心区别
watchEffect 更轻量、更声明式，但放弃对“变化来源”的细粒度控制；而 watch([a,b,c]) 明确知道哪个值变了、变前变后各是多少，适合需要差异化处理或防抖/节流的联动逻辑。两者不是替代关系，而是按需选择。
