Vue中watch监听器触发时如何获取修改数据对应的事件类型？

实现方案 #

Vue的watch监听器本身仅响应数据变更，不会携带变更来源信息，因此需要自行在数据修改的入口处增加来源标识，是最稳定的实现方式。 #

具体实现步骤

1. 替换Input的v-model为手动事件绑定，增加输入场景的来源标记
   原Input标签修改为：

<Input :value="computedData" @input="handleInputUpdate" />

2. 组件内新增来源标记变量，以及对应修改逻辑
3. 在XMLHttpRequest请求返回后修改computedData的位置，也添加对应来源标记

修改后完整代码示例：

@Options({
  name: 'dx-table',
  watch: {
    computedData: {
      handler(newData: any, oldData: any) {
        // 直接使用提前标记的来源
        console.log('数据修改来源：', this.dataChangeSource)
        // 用完清空标记，避免下次判断被干扰
        this.dataChangeSource = null
      },
      deep: true,
      immediate: true,
    },
  },
})
export default class DxTable extends Vue.with(Props) {
  // 新增数据修改来源标记
  private dataChangeSource: 'InputEvent' | 'XMLHttpRequest' | null = null

  // Input输入触发的修改方法
  private handleInputUpdate(val: any) {
    this.dataChangeSource = 'InputEvent'
    this.computedData = val
  }

  // XMLHttpRequest修改数据的示例
  private fetchData() {
    const xhr = new XMLHttpRequest()
    xhr.open('GET', '/your/api/path')
    xhr.onload = () => {
      const res = JSON.parse(xhr.responseText)
      // 修改前标记来源
      this.dataChangeSource = 'XMLHttpRequest'
      this.computedData = res.data
    }
    xhr.send()
  }
}

补充说明

• 不建议使用废弃的全局event对象，除了标准已废弃外，异步场景（比如XMLHttpRequest回调修改数据）下全局event对象会指向undefined或者完全不相关的事件，判断结果完全不可靠
• 如果不想额外加标记变量，也可以把computedData封装为包含value和source属性的对象，修改时同时赋值source，不过这种方案需要调整所有用到computedData的业务代码，侵入性更高，按需选择即可。

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