在Vue开发中，获取input修改前后的值是一个常见的需求，这在许多场景下都十分关键，比如数据校验、用户操作记录等。

我们要了解Vue响应式原理在input元素上的应用。Vue通过数据劫持结合发布者-订阅者模式来实现响应式，在处理input输入时，它能实时追踪数据的变化。

在模板中，我们通常这样定义一个input元素：<input v-model="inputValue" @input="handleInput">。这里v-model指令实现了数据的双向绑定，将inputValue这个数据属性和input的值关联起来。@input指令绑定了一个名为handleInput的方法，当input的值发生变化时就会触发该方法。

在Vue组件的script部分，我们可以这样定义相关的数据和方法：

export default {
  data() {
    return {
      inputValue: '',
      previousValue: ''
    }
  },
  methods: {
    handleInput() {
      this.previousValue = this.inputValue;
      this.$nextTick(() => {
        // 在DOM更新后获取最新的值
        this.inputValue = this.$el.querySelector('input').value;
      });
    }
  }
}

在上述代码中，handleInput方法首先将当前的inputValue赋值给previousValue，保存修改前的值。由于Vue的异步更新机制，我们使用$nextTick方法确保在DOM更新后获取到最新的inputValue，这样就得到了修改后的值。

另外，也可以通过watch选项来监听inputValue的变化：

export default {
  data() {
    return {
      inputValue: '',
      previousValue: ''
    }
  },
  watch: {
    inputValue: {
      immediate: true,
      handler(newValue, oldValue) {
        this.previousValue = oldValue;
      }
    }
  }
}

这里通过watch监听inputValue，immediate: true表示在组件加载时立即执行一次handler方法。handler方法接收两个参数，newValue就是修改后的值，oldValue则是修改前的值，我们将oldValue赋值给previousValue。

通过这些方法，我们就能轻松获取Vue中input修改前后的值，从而满足各种业务逻辑的需求，为开发更健壮、交互性更好的应用提供支持。