Vue 3 script setup中如何正确监听多个响应式值并仅在全部更新时触发监听器？

首先得点明你之前写法的核心问题：你用的() => (form.image, form.body)是JavaScript的逗号表达式，这种表达式会返回最后一个操作数的值，所以你的watch实际上只在监听form.body的变化——这就是为什么只有body更新时才触发回调的原因。

要实现「仅当form.image和form.body都发生变化时才触发监听器」的需求，我们需要两步走：

1. 正确监听两个目标属性的变化
2. 增加逻辑判断，只有当两个属性都与上一次的值不同时，才执行我们需要的业务代码

具体实现代码（包含新旧值对比） #

<script setup>
import { reactive, watch, ref } from 'vue'

const form = reactive({ body: '', image: '' })
// 用ref存储上一次的属性值，用于后续对比
const prevFormState = ref({
  image: form.image,
  body: form.body
})

watch(
  // 以数组形式指定要监听的两个属性
  [() => form.image, () => form.body],
  // 回调参数：newValues是新值数组，oldValues是旧值数组
  (newValues, oldValues) => {
    const [newImage, newBody] = newValues
    const [oldImage, oldBody] = oldValues
    
    // 判断两个属性是否都发生了变更
    if (newImage !== oldImage && newBody !== oldBody) {
      console.log('两个属性都完成更新！')
      console.log('新值:', { image: newImage, body: newBody })
      console.log('旧值:', { image: oldImage, body: oldBody })
    }
    
    // 更新存储的历史值，用于下一次对比
    prevFormState.value = {
      image: newImage,
      body: newBody
    }
  },
  // 可选：如果需要在组件初始化时就执行一次判断，可开启immediate
  // { immediate: true }
)
</script>

补充说明 #

• 上面的逻辑不仅支持「同一次更新周期内两个属性同时变化」，也支持「先后修改两个属性后，第二次触发watch时检测到两者都已变更」的场景，能覆盖大多数业务需求。
• 如果你想更简洁地监听整个form对象，但只关注image和body的变化，也可以用下面的写法（本质和上面逻辑一致）：

watch(
  () => ({ ...form }), // 解构生成副本，确保能监听到属性变化
  (newForm, oldForm) => {
    if (newForm.image !== oldForm.image && newForm.body !== oldForm.body) {
      console.log('两个属性都更新了', newForm)
    }
  },
  { deep: false } // 因为用了解构副本，不需要开启深度监听
)

不过第一种方式更精准，只会监听你需要的两个属性，性能更优。

内容的提问来源于stack exchange，提问作者Artur Müller Romanov