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