Vue 3 Composition API 中 watch 箭头函数入参语法含义咨询

基础逻辑说明 #

我们平时调用watch()时，第一个参数要求传入响应式监听源，可以是ref实例、reactive对象，Vue会自动追踪该源的变化触发回调。
而示例中使用箭头函数作为第一个参数，本质是传入了一个getter 函数，这个语法的核心作用是：监听「响应式对象上的单个属性」或者「多个响应式值组合计算出的结果」。 #

针对示例代码的具体解释 #

示例中的route是Vue Router提供的响应式路由对象：

• 如果你直接写watch(route.name, 回调)是完全无法生效的：因为route.name本身是字符串类型的普通值，不是响应式源，Vue无法追踪它的变化。
• 写成() => route.name的箭头函数后，Vue在做依赖收集时会执行这个函数，触发route.name的访问逻辑，从而绑定上响应式依赖，后续只要route.name发生变更，就会自动触发watch的回调函数。

同时这种写法还支持在回调里拿到属性变化前后的值：

watch(() => route.name, (newName, oldName) => {
  console.log(`路由名从 ${oldName} 变更为 ${newName}`)
})

其他适用场景 #

• 监听reactive对象的深层嵌套属性：例如() => user.profile.address.city，不需要开启deep配置就能精准监听该属性的变化
• 监听多个响应式值的组合计算结果：例如() => count.value * price.value，只有计算结果变化时才会触发回调
• 监听props传入的单个属性：例如() => props.visible，可以精准监听props某一个字段的变更

内容的提问来源于stack exchange，提问作者william007