@change如何获取修改前的原始值？

Question

在使用 Element Plus 或 Ant Design Vue 等组件库的表单控件时，常通过 `@change` 事件监听值的变化。然而，`@change` 事件默认只传递修改后的最新值，无法直接获取修改前的原始值。这在需要对比新旧值以触发特定逻辑（如数据回滚、变更日志）时带来困扰。许多开发者尝试通过 `v-model` 绑定的变量在 `@change` 触发前缓存旧值，但若处理不当，易导致旧值被提前覆盖。如何在 `@change` 中准确捕获变更前的原始值，成为高频技术难题。

Answer 1

一、问题背景与核心挑战

在使用 Element Plus 或 Ant Design Vue 等主流 UI 框架开发表单时，开发者普遍依赖 @change 事件来监听用户输入的变化。然而，该事件仅提供变更后的值（newVal），不包含变更前的原始值（oldVal）。这使得诸如“变更日志记录”、“脏数据检测”或“自动回滚机制”等高级功能实现变得复杂。

一个典型的场景是：当用户修改某个字段后，系统需判断是否真正发生了变化，并据此决定是否触发异步保存或提示确认对话框。若缺乏对旧值的精确捕获，将导致误判或逻辑错误。

二、常见误区与陷阱分析

• 直接在 change 前读取 v-model 变量作为旧值：由于 Vue 的响应式更新机制，某些组件（如 el-input）在触发 change 时，v-model 已被同步更新，导致“旧值”实为新值。
• 使用 watch 监听变量变化并比较：虽然可行，但无法精准关联到具体哪个控件触发了变更，尤其在动态表单中难以定位上下文。
• 试图通过事件对象获取 oldValue：原生 input 支持 event.target.oldValue，但大多数封装组件并未透传此属性。

三、解决方案层级演进

方案	实现难度	适用范围	性能影响	推荐指数
手动缓存 + focused/blur 控制	★☆☆☆☆	通用	低	★★★★☆
watch 结合 immediate 和 deep	★★★☆☆	对象型表单	中	★★★☆☆
自定义指令拦截 input 事件	★★★★☆	高级定制	高	★★★☆☆
使用 Composition API 封装 useFormField	★★★★★	大型项目	低	★★★★★

四、典型实现代码示例

// 方案一：利用 focusin 与 change 配合缓存旧值
<template>
  <el-input 
    v-model="form.name"
    @focusin="cacheOldValue('name')"
    @change="onNameChange"
  />
</template>

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

const form = ref({ name: '' })
let fieldCache = {}

const cacheOldValue = (field) => {
  fieldCache[field] = form.value[field]
}

const onNameChange = (newVal) => {
  const oldVal = fieldCache.name
  console.log(`Field 'name' changed from '${oldVal}' to '${newVal}'`)
  // 可在此执行差异比对、日志记录等逻辑
}
</script>
    

五、基于 Composition API 的通用 Hook 设计

为提升复用性与可维护性，可封装一个通用的表单字段状态管理 Hook：

import { ref, shallowRef } from 'vue'

export function useFormTracker(initialData) {
  const formData = ref({...initialData})
  const lastChanged = shallowRef({ field: '', oldVal: null, newVal: null })

  const trackChange = (field, setter) => {
    return (value) => {
      const oldVal = formData.value[field]
      formData.value[field] = value
      lastChanged.value = { field, oldVal, newVal: value }
      setter && setter(value, oldVal)
    }
  }

  return {
    formData,
    lastChanged,
    trackChange
  }
}
    

六、流程图：值变更捕获机制工作流

graph TD
            A[用户操作输入框] --> B{是否获得焦点?}
            B -- 是 --> C[缓存当前字段原始值]
            C --> D[等待值变更]
            D --> E[@change 事件触发]
            E --> F[获取新值]
            F --> G[从缓存取出旧值]
            G --> H[执行业务逻辑: 对比/日志/回滚]
            H --> I[清理或保留缓存]
            I --> J[结束]
            B -- 否 --> K[忽略或初始化]

七、跨组件库适配策略

Element Plus 与 Ant Design Vue 虽然 API 风格不同，但均可通过以下方式统一处理：

1. 抽象出 <TrackedInput> 包装组件，内部集成旧值捕获逻辑；
2. 对外暴露 @change-with-old 自定义事件，携带 { oldVal, newVal, field }；
3. 支持 slot 插槽嵌套真实组件，保持样式一致性；
4. 结合 provide/inject 实现表单级状态追踪；
5. 利用 defineEmits 明确事件契约，增强类型推导（TypeScript 场景下尤为关键）；
6. 在 FormItem 层面注入 tracker 上下文，实现字段级元信息管理；
7. 支持异步验证前的快照保存，防止脏写；
8. 集成 undo/redo 栈结构用于多步回退；
9. 配合 Pinia 或 Vuex 存储历史状态，适用于复杂表单编辑器；
10. 通过 proxy 拦截 set 操作，实现无侵入式监听（谨慎使用，调试困难）。