Vue3 watchEffect 和 watch 怎么选？scheduler 怎么配合 requestAnimationFrame？

Question

仓乃文 · Accepted Answer

watchEffect 自动追踪依赖，watch 需要明确指定数据源。watchEffect 适合不关心旧值的副作用，watch 适合需要对比新旧值的场景。scheduler 选项控制回调执行时机，配合 requestAnimationFrame 可以将高频更新合并到下一帧。

watchEffect vs watch：
```javascript
// watchEffect：自动追踪依赖，不关心旧值
watchEffect(() => {
  console.log(user.name, user.age);  // 自动追踪 name 和 age
});

// watch：明确指定数据源，可获取旧值
watch(() => user.name, (newName, oldName) => {
  console.log(`${oldName} -> ${newName}`);
});
```

scheduler 配合 requestAnimationFrame：
```javascript
watchEffect(
  () => {
    renderChart(data.value);  // 高频更新场景
  },
  {
    scheduler: (job) => {
      requestAnimationFrame(job);  // 合并到下一帧执行
    }
  }
);
```

补充说明：
- watchEffect 立即执行一次，watch 默认 lazy 不执行
- watch 可以监听多个源：watch([a, b], ([newA, newB]) => {})
- scheduler 的 job 参数就是回调函数，控制何时执行
- flush: "post" 等价于 DOM 更新后执行，flush: "sync" 是同步执行
- scheduler + rAF 适合动画、拖拽、实时图表等高频更新场景