Vue3中判断某文本输入框的内容是否改变的最佳办法

在Vue 3中，判断某个文本输入框内容是否改变的最佳做法是使用`v-model`结合`watch`或者`ref`。这里我们先介绍使用`ref`：

1. 首先，创建一个`ref`来绑定到文本输入框：

<template>
  <input type="text" v-model="inputValue" ref="textInput">
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
    };
  },
  setup() {
    const textInput = ref(null); // 使用ref存储输入框元素引用
  },
};
</script>

2. 然后，在`setup`函数中监听`textInput`的变化，例如：

watch(textInput.value, (newValue) => {
  if (newValue !== this.inputValue) { // 判断新值是否与旧值不同
    console.log('输入框内容已改变');
    this.inputValue = newValue; // 更新数据
  }
});

如果你更倾向于使用`watch`选项：

<template>
  <!-- ... -->
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
    };
  },
  watch: {
    inputValue(newVal, oldVal) {
      if (newVal !== oldVal) {
        console.log('输入框内容已改变');
      }
    },
  },
  methods: {
    handleInputChange(event) {
      this.inputValue = event.target.value;
    },
  },
  // 或者直接在模板里使用 @input 事件
  // <input type="text" v-model="inputValue" @input="handleInputChange">
};
</script>

在这两个例子中，当你输入框的内容发生变化时，控制台会打印出“输入框内容已改变”，并且`inputValue`的数据也会更新。