在 Vue 组件初始化阶段,如何实现立即触发 watch 回调?请给出具体方案。
考察说明
考察对 Vue watch 选项和初始化时立即执行回调机制的理解。
回答思路
- 【回答框架 1】Vue 的 watch 默认是懒执行的,即只有监听的数据源发生变化时才触发回调。若希望在初始化时就执行一次回调,可以使用 immediate: true 选项。
- 【回答框架 2】当设置 immediate: true 时,回调会在 watch 创建时立即执行一次,此时数据源为当前值,且 oldValue 为 undefined。
- 【回答框架 3】在 Vue 3 组合式 API 中,使用 watch 函数并传入 immediate: true 选项即可;在选项式 API 中,在 watch 对象中为对应属性添加 immediate: true。
- 【回答框架 4】immediate: true 适用于需要基于初始数据执行副作用或初始化逻辑的场景,但需注意若回调中有异步操作且依赖数据变化,需结合其他逻辑避免重复执行。
- 【关键点 1】watch 默认懒执行,immediate: true 可在初始化时立即执行回调。
- 【关键点 2】设置 immediate: true 后,回调第一次执行时 oldValue 为 undefined。
- 【关键点 3】Vue 3 组合式 API 与选项式 API 均支持 immediate 选项。
- 【易错点 1】不要将 immediate: true 错误理解为对数据变化进行深度监听,它只影响初始化时是否立即执行。
- 【易错点 2】若回调中有副作用且组件重新创建时,注意 immediate 执行可能带来重复初始化逻辑,需确保幂等性。