Vue不使用v-model的时候怎么监听数据变化？

在Vue中，v-model 是一个用于在 input、textarea 元素和组件上创建双向数据绑定的指令。但是，如果你不想使用 v-model，你仍然可以监听数据的变化。这通常通过监听 input 或 change 事件并使用事件处理函数来实现。

以下是一些不使用 v-model 的方法来监听数据变化：

1. 使用 v-on 或 @ 监听事件

你可以使用 v-on 指令（或其简写 @）来监听 DOM 事件，并在事件处理函数中更新数据。

<template>
  <input
    type="text"
    @input="handleInput"
    :value="message"
  />
  <p>{{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  methods: {
    handleInput(event) {
      this.message = event.target.value;
    }
  }
};
</script>

在上面的例子中，当输入框的值变化时，handleInput 方法会被调用，并更新 message 数据属性。 2. 使用计算属性 (Computed Properties)

如果你需要根据其他数据属性来动态计算一个值，并且这个值需要被监听，你可以使用计算属性。计算属性是基于它们的依赖进行缓存的。只有在它的相关依赖发生改变时才会重新求值。

<template>
  <div>
    <input type="number" v-model.number="firstNumber" />
    <input type="number" v-model.number="secondNumber" />
    <p>Sum: {{ sum }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstNumber: 0,
      secondNumber: 0
    };
  },
  computed: {
    sum() {
      return this.firstNumber + this.secondNumber;
    }
  }
};
</script>

在上面的例子中，sum 是一个计算属性，它依赖于 firstNumber 和 secondNumber。当这两个值中的任何一个发生变化时，sum 也会自动更新。 3. 使用 watch 属性

如果你需要监听一个数据属性的变化并在变化时执行一些操作，你可以使用 watch 属性。

<template>
  <div>
    <input type="text" v-model="message" />
    <p>Reversed Message: {{ reversedMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('');
    }
  },
  watch: {
    message(newVal, oldVal) {
      console.log(`Message changed from ${oldVal} to ${newVal}`);
    }
  }
};
</script>

在上面的例子中，当 message 数据属性发生变化时，watch 会捕获到这个变化，并在控制台输出旧值和新值。

这些是几种不使用 v-model 来监听数据变化的方法。你可以根据你的具体需求和场景选择最适合的方法。