能否单独监听v-for循环中每个元素的变化？

当然可以，而且有几种更高效的方式替代全局监听数组，直接定位到变化的对象：

方式一：操作时直接绑定事件（最直接） #

不用依赖watch，在每个面板的±按钮、输入框上绑定事件，触发时直接传入当前的pill对象，这样你明确知道是哪个对象变了，直接给这个对象发请求就行。

示例代码（Vue3 组合式API）：

<template>
  <div v-for="pill in pills" :key="pill.id">
    <button @click="adjustValue(pill, -1)">-</button>
    <input 
      v-model.number="pill.value" 
      @blur="sendSingleUpdate(pill)" 
      @change="sendSingleUpdate(pill)"
    />
    <button @click="adjustValue(pill, 1)">+</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const pills = ref([
  { id: 1, value: 10 },
  { id: 2, value: 20 }
]);

// 调整数值并发送请求
function adjustValue(pill, delta) {
  pill.value += delta;
  sendSingleUpdate(pill);
}

// 单独发送变化的对象
function sendSingleUpdate(pill) {
  // 这里替换成你的HTTP请求逻辑
  console.log('发送更新:', pill);
  // fetch('/api/pills/' + pill.id, {
  //   method: 'PUT',
  //   body: JSON.stringify(pill),
  //   headers: { 'Content-Type': 'application/json' }
  // });
}
</script>

这种方式的好处是逻辑清晰，不需要深层监听，用户操作时直接触发请求，完全知道是哪个对象发生了变化。

方式二：封装子组件，内部监听 #

如果面板逻辑比较复杂，把每个面板封装成独立子组件，在子组件内部监听数值变化，然后通过emit把变化的对象传给父组件，父组件再发请求。

子组件 PillPanel.vue：

<template>
  <div>
    <button @click="changeValue(-1)">-</button>
    <input v-model.number="localValue" @blur="triggerUpdate" />
    <button @click="changeValue(1)">+</button>
  </div>
</template>

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

const props = defineProps({
  pill: {
    type: Object,
    required: true
  }
});
const emit = defineEmits(['onUpdate']);

// 用本地变量同步props值，避免直接修改props
const localValue = ref(props.pill.value);

// 监听本地值变化，同步到props并通知父组件
watch(localValue, (newVal) => {
  props.pill.value = newVal;
  emit('onUpdate', props.pill);
});

function changeValue(delta) {
  localValue.value += delta;
}

function triggerUpdate() {
  emit('onUpdate', props.pill);
}
</script>

父组件使用：

<template>
  <PillPanel 
    v-for="pill in pills" 
    :key="pill.id" 
    :pill="pill" 
    @onUpdate="sendSingleUpdate" 
  />
</template>

<script setup>
import PillPanel from './PillPanel.vue';
import { ref } from 'vue';

const pills = ref([
  { id: 1, value: 10 },
  { id: 2, value: 20 }
]);

function sendSingleUpdate(pill) {
  // 发送HTTP请求逻辑
  console.log('更新对象:', pill);
}
</script>

不推荐：单独监听每个数组元素 #

虽然可以遍历数组给每个pill单独加watch，但这种方式需要处理数组新增/删除时的监听清理，逻辑复杂容易出问题，不如上面两种方式直接，所以不建议用。

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