Nuxt3中如何监听对象数组的指定属性及长度变化？

针对你的需求，不需要用deep: true的全局监听，只需要精准监听目标字段即可，这里提供两种可行方案：

方案一：自定义监听依赖项（推荐） #

通过在watch的第一个参数中传入getter函数，返回你需要监听的核心数据集合——数组长度和所有项的exist属性，这样只有这些值变化时才会触发回调：

<script setup>
const props = defineProps({
  formData: { type: Object, required: true }
})

watch(
  // 构造需要监听的依赖数组
  () => [
    props.formData.data.length,
    ...props.formData.data.map(item => item.exist)
  ],
  (newVal, oldVal) => {
    // 这里写你的触发逻辑
    console.log('数组长度或exist属性变更了')
  },
  // 因为getter返回的是新数组，需要开启deep来监听数组内部元素变化
  { deep: true }
)
</script>

这种方式的优势是完全精准控制监听范围，不会被name/type的变更干扰。

方案二：使用watchEffect定向追踪 #

如果你不需要对比新旧值，只是要在目标属性变化时执行逻辑，可以用watchEffect，它会自动追踪回调中用到的响应式依赖：

<script setup>
const props = defineProps({
  formData: { type: Object, required: true }
})

watchEffect(() => {
  // 主动访问需要监听的字段，让watchEffect追踪它们
  const length = props.formData.data.length
  const existValues = props.formData.data.map(item => item.exist)
  
  // 这里写你的触发逻辑
  console.log('目标字段变更了')
})
</script>

这种写法更简洁，适合不需要新旧值对比的场景。

注意事项 #

• 确保父组件的formData是用reactive/ref创建的（你例子里已经是reactive，符合要求）
• 如果数组项是动态新增的，两种方案都会自动追踪新项的exist属性，不需要额外处理

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