Vue中如何判断watch回调触发来源是用户表单操作还是API更新

这个需求完全可以实现，以下是两种经过验证的落地方式，按推荐优先级排序：

方案1：直接用组件的用户交互事件（最推荐，零冗余逻辑） #

你当前用的Vuetify v-slider 组件本身就做了事件区分：

• v-model 绑定的响应式值不管是用户改的还是程序赋值改的，都会同步更新组件显示，满足你定时拉取数据后滑块自动同步的要求
• 组件自带的@change事件仅在用户通过点击、拖动等操作主动修改值时触发，程序给绑定值赋值时完全不会触发这个事件，刚好匹配你要区分更新来源的需求

你可以直接删掉现有针对device.flow的watch，把推送逻辑绑定到@change事件上即可，改完的代码如下：

<script setup lang="ts">
import type DeviceAirValve from "../../../model/DeviceAirValve";
import {reactive} from "vue";
import {useSocketIO} from "../../../plugins/vueSocketIOClient.js";
import type {Socket} from "socket.io-client";

interface Props {
  device: DeviceAirValve
}

const props = defineProps<Props>();
const io = useSocketIO() as Socket;

const device = reactive<DeviceAirValve>(props.device);

const flowChangeHandler = (newFlow: number): void => {
  io.emit('deviceUpdate', {
    deviceId: props.device.deviceId,
    data: {flow: newFlow}
  });
};
</script>

<template>
    <v-slider v-model="device.flow" @change="flowChangeHandler"></v-slider>
</template>

补充说明：如果需要在用户拖动滑块过程中实时同步值，可以用@input事件代替@change，二者的触发逻辑一致，仅触发时机不同，都不会响应程序赋值。

方案2：添加更新来源标记（适合复杂多入口场景） #

如果后续同一个属性会被多个表单组件绑定、或者存在多处程序更新逻辑，不方便逐个绑定事件，可以加一个标记位手动区分更新来源：

1. 定义一个布尔类型的响应式标记，默认值为false
2. 所有定时拉取、WebSocket推送等非用户操作触发的赋值逻辑，在赋值前先把标记设为true，赋值完成后等下一个DOM更新周期再把标记重置为false
3. watch回调里先判断标记状态，只有标记为false时才执行推送逻辑

核心代码片段如下：

import {reactive, ref, watch, nextTick} from "vue";

const isApiUpdating = ref(false);

// 定时拉取数据的逻辑
const fetchLatestDeviceData = async () => {
  const latest = await api.getDeviceStatus(props.device.deviceId);
  // 赋值前先打标记
  isApiUpdating.value = true;
  device.flow = latest.flow;
  // 等watch执行完成后重置标记
  await nextTick();
  isApiUpdating.value = false;
}

watch(() => device.flow, (newFlow) => {
  // 非用户触发的更新直接跳过
  if (isApiUpdating.value) return;
  flowChangeHandler(newFlow);
})

不推荐的做法 #

不要尝试在watch里通过新旧值对比、时间戳差值之类的方式判断更新来源：watch本身只能感知值的变化，完全拿不到变更触发源，这类奇技淫巧在用户操作和接口更新同时触发、或者两端值刚好相等的场景下必然出现判断错误。

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