前端/移动开发面试题更新 2026-08-05

请解释 Vue 3 的 watch 与 watchEffect 之间的差异,并说明在开发中应如何根据具体场景选用这两种 API?

前端/移动开发技术原理方案权衡Vue 3

考察说明

考察对 Vue 3 响应式系统中监听机制的理解及实际选择能力。

回答思路

  1. 【回答框架 1】watchEffect 立即执行一次回调,并在其依赖的响应式数据变化时自动重新执行,它自动追踪函数内部使用的所有响应式依赖。
  2. 【回答框架 2】watch 默认是惰性的,即只有监听的源发生变化时才执行回调,需要明确指定监听的数据源,且可以访问旧值和新值。
  3. 【回答框架 3】选择依据:当需要指定监听某个具体属性,且需要旧值或进行深层比较时,使用 watch;当需要自动收集多个依赖且无需区分具体变化来源时,使用 watchEffect。
  4. 【回答框架 4】在开发中,watch 更适合处理数据变化后的异步请求或复杂逻辑,而 watchEffect 适合进行副作用操作如日志记录或状态同步。
  5. 【回答框架 5】还需注意 watchEffect 会立即执行,而 watch 通过 immediate 选项也可立即执行,但两者在依赖追踪上有所不同。
  6. 【关键点 1】watch 需要指定数据源,watchEffect 自动追踪依赖。
  7. 【关键点 2】watch 是惰性的,watchEffect 立即执行。
  8. 【关键点 3】watch 可获取旧值和新值,watchEffect 只能获取新值。
  9. 【关键点 4】选择时按需监听具体属性选 watch,自动收集依赖选 watchEffect。
  10. 【易错点 1】注意 watchEffect 在回调中访问所有响应式数据都会追踪,避免误依赖。
  11. 【易错点 2】使用 watch 时需考虑深度监听,必要时添加 deep 选项。
  12. 【易错点 3】两者都避免在回调中同步修改依赖数据,以免造成无限循环。